Instructional Links

GETTING STARTED

1. download / install / open

2. logo

3. pages

4. mp3 player

5. flash image display

6. flash buttons

7. Zooom menu (animated icons)

8. themed background image
    ( index page )

9. themed background images
    ( template pages )

10. themed image
    ( transparent image )

11. vertical slidemenu

12. horizontal dropmenu

13. bottom links / copyright

14. static icons

15. search form

16. photo gallery

17. contact form page

18. catalog page

19. faq page

20. bookmark button

21. optimizing your web pages for search engines 

22. publishing your web site

23. insert the optional scroller

22. add site wide content boxes

 

photo gallery

VIDEO LINKS: [ photo-gallery ] click to open video in a new window

if you are having troubles viewing the video's online, please download the video from the link below to view locally on your computer.

The download package includes a web page for viewing the video files, and several SWF or FLV video files.

Just download the zip file, extract, then double click on the 'web page' to view the video. 

VIDEO LINKS for download:  [ photo-gallery ]

 

** IMPORTANT "READ ME" **

Photo Gallery display in IE7
by Colin on Mon Jan 07, 2008 10:04 am

The photogallery included with your Generation8 template will not display correctly in IE7 when viewed from an un-published (local) web site. The photogallery will display correctly from an un-published (local) website when viewed with Firefox. The photogallery will display correctly in IE7/IE6 when viewed from a LIVE ( published ) website. The technology behind the photogallery is known as SPRY (http://labs.adobe.com/technologies/spry) and is one of the newest technologies to hit the web ( web 2.0 ). IE7 is not yet able to display 'SPRY' components, if the website is not published to a web host. You can create a local web host on your computer, and publish but it's a lot of work. My suggestion to all web masters is to use multiple browsers to preview your web pages ( at least IE7 and Firefox ) before publishing. If you don't have Firefox installed, I strongly suggest you do...more for the sake of testing your web pages before publishing ... but you can also preview your photogallery ( or SPRY ) components from a local web.

Overview

The photo gallery is a new component to this series of templates. We have had many requests for templates with photo galleries. There are so many different galleries available, some easy, some not and many require additional software.

The flash gallery we've included in your template allows for an unlimited number of images and albums, and some additional features included:

** dynamic display means the information is created automatically, or pulled from a file which you can edit

  1. dynamic display of image size, name and description or caption
  2. dynamic display of 'Album Title'
  3. dynamic display of 'total image in gallery'
  4. album menu ( scrolls as more albums are added )
  5. thumbnail menu, with full image display
  6. thumbnail menu scrolls as images are added
  7. SLIDESHOW - autoplay feature ( just the images and pause/stop start button )
  8. zoom control, zoom in on images, or resize All albums display
  9. dynamic display of image number ( Image 5/8  for example )
  10. external image loader, pictures load from a folder in your web, no need for additional software
  11. automatic display of thumbnails ( no need to create your own thumbnailed images )
  12. easy updates through a single configuration file

screenshot of gallery folder, and the ( slideshow.xml ) configuration file

 

The photo gallery page, uses a 'flash' photo gallery. The 'flash' photo gallery loads images from a folder in your website. To update the gallery, simply import your new pics into the {Site / gallery / albumX} folder then update the slideshow.xml file, also located in the {Site / gallery} folder.

The gallery can display multiple 'albums' as in the demo. When importing images into the web, you can save them to an album folder to keep your pics organized, or save them to the {gallery} folder.

The photo gallery displays images up to 640x480. Your images can be larger, but the gallery will reduce the size of the pics down to 640 (wide) or 480 (high) which ever dimension is the highest. Most digital camera's include a resolution setting of 640x480, thus the decision to go with the 640x480 viewable area. The names of your images can be anything you like, just remember to NOT use 'spaces' in the file name. A proper file name for an image used on the web 'should' be lower case, and definitely NO SPACES.

Bad Example:

  • DCS4001 008.JPG

Good Example:

  • dsc4001_008.jpg

UNIX and LINUX based web servers 'treat' upper and lower case file names differently, or as 2 different files. Your images might not display if named incorrectly.

First thing to do, is setup your 'slideshow' or gallery parameters. You can change many of the 'settings' for your gallery, through the slideshow.xml file.

Open the slideshow.xml file, you can change the parameters for the GALLERY, for each ALBUM and for each IMAGE.

While editing the slideshow.xml file, ONLY edit the information as highlighted in 'red' in the example below, and always make sure your parameters are enclosed in the ' '

GALLERY parameters:

  • title='Album Title'
  • description='Album Description'
  • showThumbnails='true'   (set to 'true' or 'false')
  • allowClick='true' (set to 'true' or 'false' - allows images to be opened in a separate window)

ALBUM parameters

  • title='album 1'  (Title of Album)
  • description='Album 1 Description'   (Description for Album)
  • path='Site/gallery/album1'   (the folder where the images are imported to in your website)
  • hasThumb='true'   (displays a small thumbnail image when album is selected)
  • thumbSrc='image1.jpg'   (set to 'true' or 'false') (if hasThumb is set to true, this is the image to display)
  • interval='5'   (the amount of time in seconds, each image is displayed for in slideshow mode)
  • useTransition='true'   ('true' or 'false' - image will fade out, new image fade in)
  • transTime='2' (if useTransition is set to true, this is the amount of time in seconds it will take to transition from one image to the next)

IMAGE parameters

  • src='image1.jpg'   (the picture file name)
  • caption='Photo description goes here'   (a caption for the image)

there are more parameters than what I've listed, but I only listed the parameters you 'should' change. The rest, experiment with or leave alone.

add new gallery images

The gallery comes with 10 'default' images, and 4 demo albums displayed within the gallery. The easiest thing to do, is rename your pictures, and save them to one of the 4 existing album folders.

You can also modify the 'slideshow.xml' file, to match your needs exactly.

  • import your images into the {Site / gallery} folder. In keeping things organized, I would suggest importing your pics into an album folder
  • open the slideshow.xml file
    1. the slideshow.xml file
    2. to add an image, copy an existing line of code (example:)

      <Slide src='image1.jpg' caption='Photo description goes here - 50 characters allowable' width='640' height='480' thumbWidth='80' thumbHeight='60'/>
    3. paste at the top, the bottom or inbetween 2 existing lines of code
    4. edit the ( src='imageX.jpg' ) to match your own image name

change image description

    1. open the slideshow.xml file, and edit the ( caption='Photo description goes here.....' ) with your own description

remove images

  • open the slideshow.xml file, and delete the lines of code, or albums you will not be using.

thumbnails

  • on a final note, if you want thumbnail images to display and most of us would, simply 'copy' the images located in your main folder ( as an example, for images being displayed from the 'album1' folder, simply copy the images in this folder , into the included 'thumbs' folder. ).
  • if you create a new album folder for your gallery, just include a thumbs folder inside the new album folder, and copy the images in your new folder into that folder as well.