Hello fellow designers and tutorial hunters! I have recently had a couple questions about adding a JAlbum flash gallery to a Sitegrinder built site. I felt compelled to write a tutorial on how I added my JAlbum galleries to my site to incorporate a coordinated and seamless flash gallery.
First things first… You must have JAlbum and Sitegrinder (either Basic or Pro will work)
This is a not a Sitegrinder tutorial. If you want to learn how to use Sitegrinder, please visit MediaLab for more tutorials on their product. That being said, I assume you know how to make buttons in Sitegrinder. A button is an image that is clickable and will lead you to a new page, either within your site or an external website.
In my example below, taken from my website, I have created 6 buttons for each one of my JAlbum flash galleries I am going to be making. I turned each button into a button by adding the -button hint on the appropriate layer.
I did a rollover image on my buttons so they change when rolled over on, but that is unnecessary if you just want a simple button ….
Next we are going to create our JAlbum galleries:
I find that the better organized you are, the easier this is to make,update, and maintain. So, the easiest thing to do is to make a new empty folder for each gallery you intend to make. For example, I created a logos folder, posters folder, personal folder, petz folder, etc….
Open up JAlbum and a blank screen comes up asking you drag and drop photos into main area.
JAlbum welcome screen
Before you add any images or folders, decide on the gallery you are going to create first.
I am going to start with a gallery for my logos section of the website.
Start by clicking the “settings” button on the JAlbum start screen. On the area labeled output directory, select the new empty folder you just created for logos. This is where JAlbum is going to put all your important files need for upload.
Close that window after you have selected your output folder.
Next, Drag and drop your appropriate image files or folders of the gallery you want to create into this main area. Since I want to do a gallery of just logos, I only drop my logo images inside.
After you drop the first one in, it will give you prompt to name your new album project….this is not really important, so just name it what your gallery is. This will just save a copy of your images and your JAlbum in the “My Albums” part of JAlbum, in “My Documents”, so it will be easier to change or update later. Name your album and hit ok. Add the rest of you photos……
After adding all your files, you can play around with different skins. Skins are basically how the gallery is going to be displayed. All the skins have different option, I personally like BananAlbum and it allows me to change the page BG color and layouts to fit my site.
When you are ready to publish your gallery, click the “Make JAlbum” button on the main screen.
Once JAlbum completes making your gallery, all the files should be in the appropriate folder we created in the very beginning of this. In my example, here is my logos folder I created, and the new album files JAlbum added.
Now get on your web server and connect to your files in your database, wherever you site is hosted and upload that folder to your MAIN DIRECTORY…not just the contents of the folder but the entire folder….
Here is mine…along with the other gallery folders I have created. They are in the main directory of my site, not inside another folder. (My website files are on the right, desktop on the left)
Now that your galleries are in your main server and actually online for people to view, you need to have a way to access them from your site. So, open your photoshop Sitegrinder file again and we can add links to the gallery buttons.
Once you’re file is open and ready to go, go to File–>Automate–>Sitegrinder
Click the button tab at the top
When your inside the button tab options, find the the empty field for you -button you want it to link to…in my example, it is the logos button I created.
Type the web address leading to the folder you just uploaded into your server. This changes depending on where you put the folder, but in my example, the folder is in the main directory of my site, so my link is http://www.andrewgerome.com/logos/
Once you have saved this and uploaded all your Sitegrinder files to your website, this should work perfectly and you should have no gallery errors.
As you see in the final example, that my button points directly to my web address that I just assigned to it. http://www.andrewgerome.com/logos/
That’s it! I hope this tutorial was helpful. I know the pics are kinda small, but let me know if you still have questions or are having any troubles with getting this to work.
