Somewhat Simple Image Viewer

One of the most requested features is an improvement to the Super Simple Image Viewer to allow multiple instances on the same page. As the Super Simple Image Viewer is designed to be really simple, I do not want to muck around with it. So I have created a second version that is not quite as simple, but works by instantiation instead of a static global object.

Article updated on Dec. 15, 2012

A newer version of this module is available that does not require any other JavaScript libraries, but has breaking changes.

Super Simple Image Viewer V3

Getting ready

Somewhat Simple Image Viewer Demo

The source code for the image viewer is available at https://gist.github.com/4287668.

How do it…

To get this code to work, include the following on your site just before the closing body tag:

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<!-- This is the Framework I use for building JavaScript applications; designed by YAHOO -->

<script type="text/javascript" src="pathTo/somewhat_simple_image_viewer.js"></script>
<!-- This is the actual JavaScript Photo Viewer application -->

<script type="text/javascript"><!--
// replace these with the actual names of your files
var dataAsArray = [
    "http://farm1.static.flickr.com/142/331222000_76f271e745.jpg?v=0",
    "http://farm1.static.flickr.com/159/384269775_f8b21b5e52.jpg?v=0",
    "http://farm1.static.flickr.com/178/415791942_4a4e411464.jpg?v=0",
    "http://farm1.static.flickr.com/186/421171930_80ef8ee7b2.jpg?v=0",
    "http://farm1.static.flickr.com/155/421172107_2f20ec7aeb.jpg?v=0",
    "http://farm1.static.flickr.com/54/133256387_e99cd967ff.jpg?v=0"
];

var dataAsObject = {
	portfolio1: // this needs to be the DOM ID attribute for the anchor tag to select this set
		["http://farm1.static.flickr.com/142/331222000_76f271e745.jpg?v=0",
		"http://farm1.static.flickr.com/159/384269775_f8b21b5e52.jpg?v=0",
		"http://farm1.static.flickr.com/178/415791942_4a4e411464.jpg?v=0"],

	portfolio2: // this needs to be the DOM ID attribute for the anchor tag to select this set
		["http://farm1.static.flickr.com/186/421171930_80ef8ee7b2.jpg?v=0",
		"http://farm1.static.flickr.com/155/421172107_2f20ec7aeb.jpg?v=0",
		"http://farm1.static.flickr.com/54/133256387_e99cd967ff.jpg?v=0"]
};

var photoViewer1 = Core.Widget.PhotoViewer(dataAsArray, {caption: "image", next: "showNext", prev: "showPrev"});
var photoViewer2 = Core.Widget.PhotoViewer(dataAsObject, {caption "image2", next: "showNext2", prev: "showPrev2"});
// additional photo viewers go here, just pass the HTML ID for the main image, and the next/previous anchors

--></script>

How it works…

Instead of calling the addPhoto method, as we did with the original Image Viewer to create and manage the Image Viewer data, we now create the data manually. When instantiating the PhotoViewer, the first argument is the data for the viewer and the second argument are configuration options. The configuration object has three required keys: image, next, and prev, and one optional key: caption. Each key can be set to a DOM element ID or a pointer to the element itself.

In this the examples above, the data argument is shown as both an array and an object. In the simple case where you have only one collection of images, use an array for the data object. If you have multiple sets of images and you want to allow users to toggle between the collections, then use an object with a key for each collection of images in the Image Viewer. If you use the multiple collections version, say different portfolios of images, then the key for each collection of images needs to be the same as the ID attribute of the anchor tag to be used for choosing that collection. This anchor will automatically have an event attached to it that updates the Image Viewer to the correct collection, and an error with be thrown if you do not have a matching anchor tag in your page.

For the most part it works nearly identically as the original ImageViewer. I tried to change as little as possible, so that it would be easy to convert original ImageViewer pages to this new one.