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.
Article updated on Dec. 14, 2012This module is no longer supported. However, there is a similar version called SomewhatSimpleImageViewer and an improved (standalone) version SuperSimpleImageViewerV3 available.
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:
- support next/prev
- support a dynamic # of sets of image files
- 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
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");
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:
I suggest doing this as the last elements in your body tag:
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
This will be one of the portfolio names you used as the first parameter in your
addPhoto Function calls.