ALC211K - Advanced Digital Portfolio


Setting Up Simple Viewer Image Gallery

  1. Download Simple Viewer here - make sure to get the latest version if older versions are also offered. I recommend downloading all files to your desktop.

  2. Download the php version of the build gallery script here. You will now have 2 zip files.

  3. Unzip both zip files. This should put 2 new folders on your desktop, one for simpleviewer and one for buildgallery_php.

  4. Open the buildgallery_php folder and copy the file buildgallery.php (right click or control click, then "copy").

  5. Open the simpleviewer folder (if there is a second simpleviewer folder, open that next). Paste the file buildgallery.php (right click or control click, then "paste") into the simple gallery folder where you should also see gallery.xml, viewer.swf, etc.

  6. Select all files and folders in the simple gallery folder and copy them (right click or control click, then "copy").

  7. Browse to the folder that contains your website and create a new folder called "gallery" (or similar - note that if you want more than one gallery, something descriptive, such as "performances" might work better as there may also be one called "friends").

  8. Open the newly created folder and paste the files and folders you copied above (right click or control click, then "paste").

  9. Delete the default images: Enter the "images" folder and delete the default file there. Do the same for the "thumbs" folder.

  10. Open Dreamweaver and upload the entire gallery folder. You should now have an installation of simple viewer, including the buildgallery.php script, sitting in a folder one level in from the root directory of your website.

  11. Set permissions: Use the expand button in Dreamweaver so that you can see both local and remote files. On the remote files side, open the gallery folder and right click or control click the "thumbs" directory. Find the command "Set Permissions" near the bottom of the context menu. Make sure all 9 boxes are checked, so the resulting number is 777. Next, set permissions for the "gallery.xml" file. This time the permissions should be 666, so that just the first 2 columns are checked.

  12. Edit buildgallery.php: Open this file, switch to Code view and look for the line that starts "options". The main options you may wish to edit are maxImageWidth, maxImageHeight (these determine the size of the photos themselves and should be equal), title (Text that describes this gallery), and perhaps thumbnailColumns, thumbnailRows, and navPosition, which should all be self-evident. Note that the background color of the gallery is controlled by editing the "index.html" file in the gallery folder. Look for 2 instances of "#181818" in the CSS and the script below. Note that you can also set a background image if you prefer. Index.html can be edited like any other file in your site. Save and upload buildgallery.php.

  13. Upload your photos: Copy the photos you'd like to add to this gallery to the "images" folder and upload the entire folder to the server.

  14. Run buildgallery.php: Open your web browser and type in the location of your buildgallery.php script. It will be something like http://www.yourname.com/gallery/buildgallery.php. You will need to re-run this script every time you either add new photos or edit buildgallery.php.

  15. Repeat this process for each additional gallery. Naturally, each folder name must be different.

Integrating Simple Viewer into an existing page

  1. Edit the page you'd like to use as your gallery page - perhaps something like "photos.php".

  2. Paste in the following code into the spot you'd like to contain your gallery and adjust it for your site:

    <iframe src="/gallery/index.html" scrolling="no" marginheight="0" marginwidth="0" height="560" width="100%" frameborder="0"></iframe>

    Naturally, the src attribute might be different if you have named your folder something other than "gallery". Also, you may need to adjust the height and width until the gallery looks right to you. The values can be any % or any number - representing pixels.

  3. Simple Gallery allows a right click to see the full size (original) photo. This can be useful if your originals are large. You may wish to include some text, above the iframe, that says something like "Right Click (or Control-Click on a Mac) and choose "Open Image in New Window" to see the full size image."

  4. Repeat this iframe trick in different pages for each additional gallery - if you like, you can even include more than one iframe in the same page.

Bug: gallery fails to update

One problem I've run into with simple gallery is that after I run the buildgallery script to update my gallery, it doesn't update. This gets especially confusion when I'm uploading a second gallery and it appears to show the not-updated version of the first one! Sometimes I even see X's instead of images. What's going on?

Solution: Refresh your gallery.xml file!
For some reason, many browsers cache (or keep a local copy of) xml files. So even when the file on the server has changed, your brosers chooses to show the previous version instead. This results in what appears to be a gallery that didn't update.

The fix is simple - just point your browser to your gallery.xml file and "refresh" the page (or "reload" or sometimes the F5 key). The path to your gallery.xml file should be something like: http://www.yourname.com/gallery/gallery.xml. Naturally, yours will be slightly different so check it closely. Since you are already loading buildgallery.php this way, the task should not be hard.

Note: You can tell your simple gallery is updating correctly when you load it for the first time after running buildgallery.php. Just look for the the little white bars as each thumbnail is built.

Bug: buildgallery.php processes only a few photos and stops

This can happen when the photos being processed are too large (in terms of file size). In particular, if the files are larger than 1MB each, the photo processor will be unable to create thumbnails from them and the script will fail.

You may need to use Photoshop to resize the original files. I recommend something 1024x768 pixels, saved for web. This will create files at less than 150K, which will be easy to process.