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.
Article updated on Dec. 14, 2012
This module is no longer supported. However, there is a similar version called SomewhatSimpleImageViewer and an improved (standalone) version SuperSimpleImageViewerV3 available.Somewhat Simple Image Viewer
Super Simple Image Viewer V3
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");
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://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="pathNoLongerExists/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
Function calls.