AJAX Photo Album

Use this script to create a simple photo album in your site. This photo album uses technologies like AJAX, XML, Javascript. It stores the names of the photos neatly in an external XML file and it can be easily customized. Take a look at this preview and see how I use it on my photos page to get a visual idea about how it works.

Features

• AJAX: It has the concepts of AJAX and dynamic HTML so it therefore when navigating, it does not load the whole page but only the parts that change.
• Bookmarkable URLs: Use of url with hash so that every page that is viewed is bookmark-able. A bookmark can be created that points to specific albums or images.
  
• Back button: Use of browser's back and Forward button is supported, since URLs can be bookmarked!
  
• Albums: Ability to group the photos in albums that have their own title.
• Paging: In case an album has a lot of photos, they are shown in different pages, so that the user does not have to scroll a lot to see the whole album in the browser. The user can configure how many photos will be displayed per page.
  
• Photo Pre-loading: While an image is viewed, the next image to be viewed is preloaded, so that it takes zero time to load when navigating to it. When an album is viewed, its images are also preloaded while the user is viewing a picture.
  
• Thumbnails: There is the option to use a separate folder to store the thumbnails.
  
• Photos Configuration: The photo's file names as the description of the photos are stored in an XML file externally.
  
• Script Configuration: The script parameters are easily configurable in a separate file.
  
• Slide-show: Option to show the photos in slide-show mode.
• Browser Compatibility: The script has been tested in Firefox 2, 3 and Internet Explorer 6, 7
  

Instructions - How to use it

1. Download the zip package (370kB) and extract it to a desired folder. This contains the html and script files as well as some sample configuration and images to get you started.
   
2. By opening the file photos.html the photo albums are displayed. The user can navigate between the albums by pressing the Next and Prev buttons. By clicking on a photo, the album is in photo mode and the navigation is now between the photos of the album. There is also the option for slideshow.
3. Add the photos you want to display in the directory photos*. A recommended photo size would be length 500px. The photos should have the extension .jpg.
4. Add the thumbnails of the photos to the directory thumbnails*. A recommended thumbnail size would be length 120px. The thumbnails should have the same name as the photo and have the prefix th_*. For example for a photo named me.jpg, the thumbnail should be th_me.jpg.
5. Edit the photos-sample.xml* file by grouping your photos in albums and specifying a description for every album and every photo. Use the name attribute for the photo to specify the photo's file name (without the .jpg extension).

* These are configurable in the photos-sample-config.js file.

Labels: Dev