Lesson 8 - Simple Viewer Image Gallery

welcome to Wreamweaver 8

SimpleViewer and SimpleViewerAdmin

Simple Viewer Image Gallery is an application that allows you to upload .gif and .jpg images from a simple Web based interface and have them appear in a Flash Player image gallery on your website. It is a very elegant application which gives your website a very professional look. It is straightforward to set up, but you need to really follow the instructions carefully, as you will need to edit some PHP files in the configuration of this application.

You should start out by taking a test drive of Simple Viewer at http://www.airtightinteractive.com/simpleviewer/

Read the documentation carefully, and look over the files you unpack. Take time to look at the initial set of test images, and upload that test image to your website.

SimpleViewer is built on PHP or whatever code you need, and you'll need to have a server that is consistent / comliant with that configuration. You also need to be able to have read/write/execute ability within your driectory.

Uploading and Configuring SimpleViewer - Manual Instructions

Simple Viewer can be downloaded from http://www.airtightinteractive.com/simpleviewer/simpleviewer.zip

These instructions show you how to create a SimpleViewer gallery by manually creating the thumbnail images and XML file required by SimpleViewer. To do this, you can use the text editor and image editing software of your choice. This option is recommended if you do not have access to server-side scripting or if you want fine control of customization options.

Follow the steps below to create a SimpleViewer gallery on your website.

1: Download SimpleViewer files

Download and unzip SimpleViewer files to a new folder. You can call that SimpleViewer or Gallery.

2. Add images

Copy your images to the ' images' folder. Images should be JPGs and saved as 'non-progressive'.

3. Create thumbnails

Create thumbnails with an image editing program (e.g. PhotoShop). Place thumbnail images in 'thumbs' folder. Thumbnails must have the same name as the full-size image. Thumbnails should be at least 65x65 pixels (larger thumbnail images will be cropped).

4: Edit gallery.xml

This file is a simple text file that can be edited in any text editing software (e.g. NotePad, TextEdit ). Set your gallery options by editing the simpleviewerGallery tag attributes at the top of the file. Here is a list of the XML gallery options with their descriptions.

Next, add an <image> tag for every image in the gallery:

<image> <filename>115-1503_IMG.jpg</filename> <caption>Arles old town.</caption> </image>

<filename> is the filename of the image file and the thumbnail file.
<caption> is an optional text caption for the image.

5. Set background color (optional)

To set the background color, edit index.html. Enter the hex color value as the last parameter in the SWFObject code line:

var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "7", "#ff00ff");

6. Upload files.

Upload all your files to a new folder on your web server.

Uploading and Configuring SimpleViewerAdmin

The directions for working with it are also there, but beware this is a very complicated set of instructions. Below are a slightly simplified set of directions which may help you in navigating the download and configuration of the files.

Follow these Steps:

In order to run SimpleViewer Admin it requires both the regular SimpleViewer zip file and the SimpleViewer Admin zip file. After they both have been downloaded they both must be copied to the server to the SAME directory.

1. Download regular SimpleViewer from airtight: http://www.airtightinteractive.com/simpleviewer/

2. Download SimpleViewerAdmin-1.3.zip file that contains SimpleViewer Admin and other files from: http://www.redsplash.de/projects/simplevieweradmin/

The instructions at the web site are for upgrading. Further down there is there is a FAQ with some debugging info.

System Requirements:

Client Server

XHTML 1.0 Supported Platforms: Linux, UNIX, Mac OS X
CSS 2.1 PHP4.1 and above, PHP 5.0.4 and above
Javascript 1.3 GD (1.x works, 2.x recommended)
Flash 6 PlugIn XML support (expat, libxml)
Cookies Safe-Mode has to be Off
Write access to the installation directory is mandatory

The instructions at the web site are for upgrading. Further down there is there is a FAQ with some debugging info.

3. For a new installation just ftp the files to the server into a single directory.

The following files will be on the server:

SimpleViewer/
- SimpleViewer.php
- SimpleViewerAdmin.php
- SimpleViewerConfig.php
- SimpleViewerConfig.xml
- SimpleViewerCss.php
- SimpleViewerEditImage.php
- SimpleViewerFunctions.php
- SimpleViewerImageData.php
- flash_detect.js
- get_flash_player.gif
- img/
- ArrowLeft.gif
- ArrowRight.gif
- Delete.gif
- Edit.gif
- index.php
- upgrade.html
- upgrade.php
- viewer.swf

4. In a browser window bring up SimpleViewerAdmin.php to configure and to create galleries:

http://yourDomainName/yourSimpleViewerAdmin folder/SimpleViewerAdmin.php

NOTE: yourDomainName is wherever you are running the SimpleViewerAdmin from
yourSimpleViewerAdmin folder is the name of the folder where you put all of the files

If it asks for a username/password the default is admin/admin. You may change this later.

4a. FIrst, click on configure. Set the values and click save. If the message in the top of the second
panel says that it can't save the file there is a system problem. You might not have a recent
php version or the GD Library may not be installed. Contact the system administrator to fix it.

4b. Create a gallery by clicking on the + after Albums. If there are no file formats listed where it says
Note: You can upload the following formats:
then the GD Library is NOT installed and it must be for this to work.

4c. Add the images. After that edit the album configuration. Be sure to
set isPublished to true otherwise you will get a message saying that simpleviewer is not set up when
you try to bring up the gallery.

5. Run SimpleViewer from the browser:

http://yourDomainName/yourSimpleViewerAdmin folder/index.php

6. In a browser window bring up SimpleViewerAdmin.php:

http://krypton.fhda.edu/~yourname/gallery/SimpleViewerAdmin.php

If it asks for a username/password the default is admin/admin.

7. You can now run SimpleViewerAdmin remotely to upload your image files from anywhere.

7a. After logging in, go to galleries, and either select an existing gallery, or create a new one

7b. Go to a folder with images - and select an image

7c. Give the image a caption, and then choose 'save'

7d. Test your gallery, and go back to SimpleViewerAdmin to correct, modify, add, or delete images and galleries.

10 Quick Steps for Setting Up SimpleViewer Admin (Summary of the steps above)

Download simpleviewer.zip and extract to a clean folder – 2 folders and five files (7 objects)
Download simplevieweradmin.zip and extract to a clean folder – 1 folder and 10 files (11 objects)
Take all of the files and folders from SimpleViewer and SimpleViewerAdmin and combine them into a new folder called gallery
Gallery will have a total of 18 objects in it
Upload gallery to your web server / web hosting account
Immediately use chmod to set permissions to 777 on gallery (this is the most important thing you’ll forget to do)
From your web browser type in /gallery/SimpleViewerAdmin.php<
Create an album, upload an image, add a caption
Set published=’true’ for each album you create, and delete index.htm from gallery (another important thing you’ll forget to do)
Go to /gallery/ or /gallery/index.php with your web browser and you’ll see your album

Setting Up Your Image Gallery

Once you have SimpleViewer and SimpleViewer admin set up (installed and tested) you are ready to start building your image gallery. Start with a dozen or so images around a particular topic, and if possible, they should be more or less of the same aspect ratio - but you'll learn to work around that. Your images don't need to be in the same folder, but having an organized pool of images, especially if you have hundreds or thousands, is important to good file organization, which in turn is part of being a good Web developer.

My image gallery can be viewed at http://www.informaticus.org/gallery/

Tesla has an image gallery at http://www.teslamotors.com/design/gallery-body.php

Adding Metadata to Your Gallery

The gallery page in your website, like all other pages, needs to have metadata to increase discovery (if that's what you want) and especially if that discovery is related to images of products and services for a client. Think about using RSS (Rich Site summary) and RDF (Resource Description Framework) as a way to describe the original images as reified objects themselves.