The last two days I have been catching up on blog comments and related emails. Sorry for any delays. For the most part I have either responded to comments directly in the blog, and written an occasional email response as necessary.

Anyway, one of the most requested features is an improvement to the Super Simple Image Viewer (SSIV) to allow multiple instances on the same page. As the SSIV 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.

Somewhat Simple Image Viewer

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

Example 1: Somewhat Simple Image Viewer

<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="http://mattsnider.com/assets/js/widget/matts_photo_viewer2.js"></script> 
<!-- This is the actual JavaScript Photo Viewer application -->

<script type="text/javascript"><!--
// replace these with the actual names of your files
var data = {
	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 data2 = {
	portfolio3: // 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'],
		
	portfolio4: // 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(data, 'image', 'showNext', 'showPrev');
var photoViewer2 = Core.Widget.PhotoViewer(data2, 'image2', 'showNext2', 'showPrev2');
// additional photo viewers go here, just pass the HTML ID for the main image, and the next/previous anchors

--></script>

Instead of calling the 'addPhoto' method, as we did with the original Image Viewer, that created and managed the Image Viewer data, we now create the data manually. In this case, the data Object needs a key for each collection of images needed for the Image Viewer; if there is only 1 collection of images, then 'data' can just be an Array, instead of an Object. If you have multiple collections of images, say different portfolios (as in Example 1), 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 in the DOM. This anchor will 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.

However, 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.