Here is a full screen slideshow in Javascript, without using flash, and I wanted to tell you how I did it, and how you can do it too. I will talk a bit about Javascript here, but you will be able to download the jQuery plugin I have without needing to know much, if all you want is to implement the gallery.

First of all, I wanted to use the jQuery library. It is a small compact little library that makes operations like selecting parts of an HTML document easy. It is cross platform too, so the likely hood if it working on Safari, IE, and Firefox is high.

Next, I went looking for a jQuery plugin that did the image scaling already. I ended up with a plugin called bgStretcher from ajaxBlender.com. The main idea behind this plugin, is that it takes an image, places it in its own div that appears to be the background, then stretches the image to fill the browser window. This plugin was close to what I wanted, but it was missing a few things. First, I wanted to be able to navigate through the images with buttons, not just a slideshow. That was a simple matter of adding some onClick handlers and calling new methods in the javascript. jQuery has the ability to ask for the .next() or .previous() html item, so once I had the current image selected, it was easy to find the next or previous.

Then I wanted to be able to handle albums, not just one list of images. That was harder. Instead of just supplying a list of images to bgStretcher, you now pass albums to bgStretcher2. You identify the album before you pass the list of images.

$(document).bgStretcher({
  albums:{'Landscapes':['images/landscape1.jpg', 'images/landscape2.jpg', 'images/landscape3.jpg'],
          'People':['images/people1.jpg', 'images/people2.jpg', 'images/people3.jpg'],
          'Flowers':['images/flowers1.jpg', 'images/flowers2.jpg', 'images/flowers3.jpg'],
          'Night':['images/night1.jpg', 'images/night2.jpg', 'images/night3.jpg']},
  album: 'Landscapes', imageWidth: 1200, imageHeight: 800
	});

This way you pass a name of the album that I use to assign all images in that album with that class. I then can use a jQuery selector to select all images with that class. Now I can navigate from image to image within the album. Note: One thing that is brittle about this, is that your menu items need to match these album names.

var current = $(containerStr + ' LI.'+$.fn.bgStretcher.settings.album).filter('.bgs-current');

This ends up more like this:

var current = $('#bgsretcher LI.Landscapes').filter('.bgs-current');

That line will select within the bgstretcher div all the LI elements with a class of Landscapes. It then narrows in on the currently selected one with the filter. I could have done it all with one string, but thought the addition of the filter made it clearer.

Now, if you are looking at the HTML and not finding a bgstretcher div, or the LI elements that contain images, don’t worry, it’s because they are not there. At least not in the static page. They get generated in the _genHtml() function at start.

The last thing to do was to modify the next and previous functions so that they would stick to selecting items within the current album. That turned out to be similar to the selector above for curent, but I just needed to get the ‘:first’ element that had the album class attached.

Once the Javascript was working I wanted to spruce it up a little bit. I used a menu plugin called lavalamp from Ganesh. In its default config, the plugin has a orange image around the menu. I kind of liked it, but it wasn’t quite the right size for the items I had, so I had to disable it. I think you could generate another image the right size and make it work, but I didn’t get to trying that.

The lavalamp plugin also uses another plugin, called easing. It provides the bouncing effect you see when moving the mouse around the menu. I think this is a great example of how well plugins work with jQuery. The base language extension is small and compact, but you can easily add functionality with plugins, and they can even interact together.

If you would like to use this code to create your own full screen slideshow image gallery, I have provided a download of the files required. I won’t get much into the details of installation because it is so simple. There is one index.html file, a css folder with the styling, and a js folder with the Javascript files. On my site I have a images folder that I placed all my images into, but for the download, I simply referenced some of my images from flickr to make the download smaller. Now, remember, if you are putting this up, you might want to host the images locally, because it is actually against the terms of service of flickr to not link back from the image to flickr. I don’t have that linking ability in my script right now.

The only thing that you need to do is prepare some images and change the list of albums and images in the index.html file. Also, remember that the album names, and the menu titles need to be the same, so don’t forget to modify the menu too. That is just how the script works. You can add or subtract albums by adding or subracting more LI elements. Just follow the pattern in the index.html file.

The last line in the images setup Javascript is the album to start on, and the images height and width. The images will size best if they are about the same size and about the height and width that you state in the file here.

Download Name Version Size Updated Hits
downloadbgStretcher2.zip2.130.81 KBJuly 8, 201089