Matt Snider JavaScript Resource

A designer friend of mine was having trouble with one of those Image Slideshow JavaScripts you download off the internet and ask for my help. I thought it would be an easy fix, but after looking at the code I realized 2 things: the code was crap and my friend knew very little about web technologies. The code was supposed to cache images using a simple ‘addPhoto’ function and then cycle through them with a previous and next anchor without requiring page refreshes. However, all it really did was modify the URL, which would require some server-side scripting.

Being a relatively nice person, and also curious to see how difficult and time-consuming it would be to write a super-simple image slideshow using YUI I said that I would write something.

My goals were as follows:

• unobtrusive
• support next/prev
• support a dynamic # of sets of image files
• super-lightweight
• must use module pattern

About 90 minutes of work later, the result is a 2kb minimized file that only requires ‘yahoo-dom-event.js’. A page using the slideshow need only have two anchors (with ids ‘’showNext” and “showPrev”) and an image tag (with id “image”). If you want to have more than 1 set of images then create a series of anchor tags and give them each IDs. These IDs will be used to identify the data set. Lastly, to add images to the file I created a shortcut method ‘addPhoto’ which can be used as follows:

An Example with 4 Sets of Images

//addPhoto(/*anchor ID of set*/, /*path to image file*/);
addPhoto(’set1′, ‘image1-1.jpg’);
addPhoto(’set1′, ‘image1-2.jpg’);
addPhoto(’set1′, ‘image1-3.jpg’);
addPhoto(’set2′, ‘image2-1.jpg’);
addPhoto(’set2′, ‘image2-2.jpg’);
addPhoto(’set2′, ‘image2-3.jpg’);
addPhoto(’set3′, ‘image3-1.jpg’);
addPhoto(’set3′, ‘image3-2.jpg’);
addPhoto(’set3′, ‘image3-3.jpg’);
addPhoto(’set4′, ‘image4-1.jpg’);

I also have a live example.

Change Made on 11/15/2007

As Jak pointed out I did not do a very good job explaining how to use this tool. In order to use this, you should first include these two files:

yahoo-dom-event.js
matts_photo_viewer.js

I suggest doing this as the last elements in your body tag:

<script type=”text/javascript” src=”http://mattsnider.com/js/yahoo-dom-event.js”></script>

<script type=”text/javascript” src=”http://mattsnider.com/js/matts_photo_viewer.js”></script>

<script type=”text/javascript”>
// replace these with the actual names of your files
addPhoto(’portfolio1′, ‘images/berserk1.jpg’);
addPhoto(’portfolio1′, ‘images/berserk2.jpg’);
addPhoto(’portfolio1′, ‘images/berserk3.jpg’);
addPhoto(’portfolio2′, ‘images/parasite1.jpg’);
addPhoto(’portfolio2′, ‘images/parasite2.jpg’);
addPhoto(’portfolio2′, ‘images/parasite3.jpg’);
</script>

</body>

The last script tag is where you will put in your images. The first parameter in an ‘addPhoto’ Function call should be a portfolio name. If you want only one collection of images then use the same string for all ‘addPhoto’ Function calls. The second parameter is the relative path to your image. Call ‘addPhoto’ for each image you want to have in the viewer.

In your HTML markup, you will have to use 3 ID attributes: image, showNext, showPrev. The ‘image’ ID should be applied to the IMG tag that you want the update. The ’showNext’ ID should be applied to your “next” anchor tag and the ’showPrev’ to your “previous” anchor tag.

Optionally, if you want to have multiple sets (portfolios) of images, you need to attach an event handler to some element that will call

Core.Widget.PhotoViewer.changeSet(nameOfThePortfolio);

This will be one of the portfolio names you used as the first parameter in your ‘addPhoto’ Funtion calls.