SimpleViewer (see here) offers a quick and free method of placing an elegant image gallery on your page. There is a sample gallery on their home page at http://www.simpleviewer.net/products/.
There are many different ways to create the necessary files for a SimpleViewer gallery (see the options here under "Using Templates"). Each method will create very similar results - but in this article we will run through the steps of creating a SimpleViewer gallery in Photoshop CS2, CS3 or CS4.
Before we start, make sure you already have a "project" folder set up for your web site (inside which is the Freeway file and the Site Folder). If you haven't started the project yet, use the Blank template to create the correct structure on your hard disk so you have the necessary folders into which you can move the SimpleViewer files after the gallery files have been created.
1. First you need to visit the "start" page (see link above) and click on the Photoshop link. On the next page, click on the SimpleViewer Photoshop CS2 script hyperlink to download a zip file. Unzip the file and move the entire folder into Photoshop's Presets>Scripts folder. Now restart Photoshop if it is currently running.
2. You next need to set up two folders on your hard disk - one to use for your original images, the other for the "output" folder where SimpleViewer will place its files ready for use in Freeway.
3. Launch Photoshop and go to File>Scripts>SimpleViewer (this may have "_v2" or some other suffix after "SimpleViewer" depending on the version you downloaded). This will open the SimpleViewer gallery dialog. There are many options here - such as thumbnail size, background color, etc. - but these won't be covered here as they are all covered in documentation on the SimpleViewer site.
4. In the SimpleViewer dialog in Photoshop, select the folder where you have stored your original images as the Input Folder then select the Output folder into which the files will be processed. Make your choices from the options available, then click the "Build Web Gallery" button. The time this now takes depends on the amount of images and their size. After the images are processed, you will be presented with the slideshow in a browser window - this gives you the opportunity to see the result of the options you chose, so if you want to make adjustments you will need to re-create the files again and then process them into the Output folder using the earlier procedure. Once everything is as you want it to look, proceed to the next step.
5. Open your Output folder on your hard disk to see that you now have the following files/folders inside:
- "gallery.xml" file
- "images" folder
- "index.html" file
- "readme.html" file
- "simpleviewer.swf" file
- "thumbs" folder
Two of the above files are not used when setting up the gallery in Freeway, so you can ignore "index.html" and "readme.html".
6. Go to the Freeway page on which you want to use the slideshow, drag-and-drop the "simpleviewer.swf" onto the page, position it where you want, then publish the file by previewing it in a browser. You will see that the files cannot be found according to an error message on the page - but we will fix this in the next step.
7. Locate your file's project folder on your hard disk, open it, then copy the "gallery.xml" file and the "images" and "thumbs" folders from the SimpleViewer Output Folder into your Freeway file's Site Folder. Now when you preview in a browser you should see it all working. This is because the .swf file is "referencing" the .xml file (which contains the information of where to look for the thumbs and images of the slideshow) and the .swf file is looking for the .xml file in the same location as the .html page file that the gallery is being used on.
You now have the correct structure for your SimpleViewer files on your computer so it can be tested and seen working "locally". The next stage is to ensure the files are in the correct location when you upload the site to the web.
Freeway will automatically upload the .swf file into the correct location, but Freeway has no idea that the rest of the files need to be uploaded because the code for these "referenced" files is buried inside the .swf file itself. This means that you need to either upload the files manually (using a standalone FTP application, such as Cyberduck or Transmit) or you can use the Upload Stuff Action (which you can get here). Upload Stuff is a Page Action which you need to apply to the page and then choose the files or folders you want to upload, and where to place them. For this tutorial, use the popups in the "Upload to HTML location" section to choose the "gallery.xml" file and the "images" and "thumbs" folders.
If you want to use SimpleViewer galleries on more than one page, the simplest way is to create a page folder in the Site Panel list for each page containing a SimpleViewer gallery (you can do this by going to Page>New Folder then moving the page into the new folder). This means that you won't need to rename the referenced files because each of the "gallery.xml" files and the "images" and "thumbs" folders will reside in their own page folder. To test the galleries locally (on your computer by previewing in a browser) you will need to copy the "gallery.xml" file and the "images" and "thumbs" folders into their relevant page folders in your Freeway file's Site Folder on your hard disk.
Because you are now using specific page folders, this now means that you can't use the Upload Stuff Action to get the galleries working when you upload the files to the web. You will need to use the manual method (via a standalone FTP application) to upload the "gallery.xml" file and the "images" and "thumbs" folders for each gallery into their relevant page folders on the web server after you have uploaded the files with Freeway.
If you use a long row of thumbnails above or below your large image in SimpleViewer, you may find that the .swf file is not wide enough to accommodate all the thumbnails. To fix this you need to make the .swf item wider on your Freeway file (this will look strange in Freeway, but it will preview fine).