Lesson 7 - SimpleViewer Image Gallery


DW Cover


SimpleViewer and SimpleViewer Admin

SimpleViewer is a free, customizable Flash image viewing application. It is a very elegant application which gives your website a very professional look. The download comes with the viewer and a sample gallery. Once you see how it works you can modify it to view your images. You should start out by taking a test drive of SimpleViewer at http://www.simpleviewer.net/simpleviewer/.

SimpleViewer also has a PHP script that can be run on a webserver to automatically generate xml files and create thumbnails for SimpleViewer through an interface. If you need to create more than one gallery and would like to manage it over the web you can purchase svManager from SimpleViewer. A secure interface is provided where multiple galleries may be created and images may be uploaded.

SimpleViewer Admin is a free, fully featured adminstrative backend for the older version 1.9 of SimpleViewer, featuring a very usable web interface that allows you to create multiple galleries, configure gallery appearance, upload images, automatically generate thumbnails and more. It is built on PHP or whatever code you need, and you'll need to use a server that is consistent / compliant with that configuration. You also must have read/write/execute ability within your driectory. 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 the SimpleViewer Admin application.


Uploading and Configuring SimpleViewer - Manual Instructions

SimpleViewer galleries can be created various ways. If you have photos on Flickr or Picassa you can export them and create a SimpleViewer gallery for them. You can use Photoshop, or even manually create a SimpleViewer gallery. This newer version also allows you to create a gallery directly on your host by running its php script. To use that option your host must support php. The instructions describing all of these options are on the SimpleViewer Support page.

To start using SimpleViewer download it from http://www.simpleviewer.net/simpleviewer/. Unzip the file and you will find an examples folder and a web folder. The list describes what is in the folder:

Using the files in the web folder you can create a SimpleViewer gallery by manually creating the thumbnail images and editing the gallery XML file. To do this, you can use Dreamweaver and image editing software of your choice.

1: Download SimpleViewer files

Download and unzip SimpleViewer files to your desktop. Make a copy of the web folder. This will be your gallery folder.

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 should be at least 75x75 pixels (larger thumbnail images will be cropped).

4: Edit gallery.xml

Open gallery.xml in any text editing software (e.g. Dreamweaver, NotePad, TextEdit ). Set your gallery options by editing the simpleviewergallery tag attributes at the top of the file. View details on setting config options.

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

<image imageURL="images/tall.jpg" thumbURL="thumbs/tall.jpg" linkURL="http://www.google.com" 
       linkTarget="_blank" >
  <caption>This is my caption.</caption>
</image>

5. Set background color (optional)

To set the background color, edit index.html. Enter the hex color value like this:

params.bgcolor = "222222";

6. Upload files.

Upload your gallery folder to your web server.

Note: If you have Photoshop you can install the script and use it to generate the gallery from a folder of images. The thumbnails are created from the images and may be cropped so you may want to create those manually.

Embedding SimpleViewer Gallery into a Web Page

Once a gallery has been created it can be embedded into an html document. The SimpleViewer site shows how to do this using a JavaScript embed, basic embed, and even how to do it using Dreamweaver.

The JavaScript embed is the recommended way and it is just a matter of copying the code and pasting it into your document. Note that if your document is not within the gallery folder then you will be embedding an external gallery folder. This means that you will need to set the baseURL variable to the name of the gallery folder. This is done in the script code that you copied into the <head> of the document. If your gallery folder is named 'svgallery' then you would set the baseURL flash variable as follows:

var flashvars = {};
flashvars.baseURL = "svgallery/";
flashvars.galleryURL = "gallery.xml";

If you do not set the baseURL variable then the Flash player will not find the images. Remember to do this when your document does not reside in the gallery folder. You must also add the name of the folder that the simpleviewer player is in:

swfobject.embedSWF("svgallery/simpleviewer.swf", "flashContent",

Go to the SimpleViewer site for all of the details for embedding a SimpleViewer gallery into your document. It also has a link that shows how the embed an external gallery folder.

To see an example of a SimpleViewer gallery that was embedded into a document using JavaScript visit the DWsite.

After you learn about iframes you can integrate your gallery into an iframe on your document. Set the width and height of the iframe to the size specified in gallery.xml and set the src of the iframe to index.html or whatever you have named the document that contains your gallery.

Visit the DWsite to see the SimpleViewer gallery displayed in an iframe.


SimpleViewer Run on a Webserver

SimpleViewer may be run on a webserver using the BuildGallery PHP script to automatically generate xml files and create thumbnails. If the SimpleViewer gallery already exists then just download BuildGallery, unzip it, and copy buildgallery.php to the gallery. Next, upload it to your webserver. If there are any other images then copy those to the images folder and upload them to the webserver. In a web browser navigate to the URL where buildgallery.php is stored.

For example: http://www.mysite.com/mygallery/buildgallery.php. The interface comes up where you can customize the gallery.

SimpleViewer Build Gallery


After all of the fields have been filled in click the Update button. The gallery.xml file and thumbs will be generated. To view the gallery click the View gallery link at the top of the screen. Below is a snapshot of my gallery. When the cursor is moved over the main image the caption is revealed.

SimpleViewer Gallery


For details and to download buildgallery visit the SimpleViewer Buildgallery page.

Note that the webserver requires PHP 5.0 or later and if you attempt to run it under PHP 4 you will see an error message. If you are using the Foothill servers then you can run this by going to the ctislab server. Everything you have uploaded to krypton is also on ctislab. To run php you must do this from ctislab. You must use the full path to access the php file. The shortcut method will not work. Here is how you would access buildgallery.php which is stored in mygallery:

http://ctislab.fhda.edu/COIN74.04w/yourname/public_html/mygallery/buildgallery.php


svManager

svManager is a PHP application that runs on a webserver and provides a graphical interface for managing multiple galleries. It has more features than buildgallery. It is more secure in that you log in to use it. Images are uploaded through the interface and you can create more than one gallery. It costs $35. Run the Demo to see if you would like to buy it. Scroll to the bottom and click View Demo under svManager.

Once it has been purchased it is ready to be installed:


Uploading and Configuring SimpleViewer Admin

SimpleViewer Admin was created several years ago by .redSPLASH Projects. It is a PHP application that runs on a webserver. It uses an older version of SimpleViewer and enhances it so that it can be run and administered from a webserver. It is like svManager but it is free and uses SimpleViewer Version 1.9 (will not work with SimpleViewer 2.0) and requires a lot more configuration steps.

If your webserver supports SimpleViewer Admin, krypton does not, then follow the directions below but beware, this is a very complicated set of instructions. At the end of these instructions 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 SimpleViewer zip file and the SimpleViewer Admin zip file.  After they both have been downloaded they both must be copied to the server  into the SAME directory. Note that SimpleViewer Admin will not work with the newer SimpleViewer 2.0. You will need to download the older version.

  1. 1. Download SimpleViewer Version 1.9, simpleviewer.zip, from:  http://www.simpleviewer.net/simpleviewer/support/v1_9/manual_instruct.html and extract the contents into a clean folder. Should end up with 2 folders and 5 files. 2.
  2. Download SimpleViewerAdmin-1.3.zip file that contains SimpleViewer Admin and other files from:  http://www.redsplash.de/projects/simplevieweradmin/ and extract to a clean folder. Should end up with 1 folder and 10 files.

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 called gallery. After all the files have been copied do a chmod to set permissions to 777 on gallery. This is critical!

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, in our example it is gallery.

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. Again, contact the system administrator.

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 using the full path to your account on ctislab. If you try to run it on krypton it will not work because PHP is not on krypton:

http://ctislab.fhda.edu/COIN74.04w/yourname/public_html/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)

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

* click the link below to continue with this lesson *
Assignment 7

Copyright © 2009 - 2010 Robert D. Cormia - May 10, 2010