Logic’s Last Stand

November 26, 2008

Very Simple JavaScript Image Viewer

Filed under: Computers — Tags: , , , — Zurahn @ 2:21 am

Being in need of a relatively simple inline viewer for a series of images, I opted to make my own instead of looking to the many premade options with far more detail than I’d need. While I’ll probably spruce my own option up from the bare-bones, I thought the baseline was a nice example piece of how to keep things simple in a time when there’s a tendency to move towards frameworks such as jQuery, which while excellent in many instances, aren’t always necessary.

I’m not a fan of JavaScript’s implementation of objects, so I generally avoid them. However, in this case it seemed rather suitable. Just pass the element ID of what you want to contain the images, along with an array of images to the Gallery constructor, then run the init function with the IDs of the navigation buttons on page load.

The navigation was the part I was a bit torn on. Optimally it would be part of the actual gallery code and not something that needed to be added separately; the problem is that in order to call the next() and prev() functions for the object, I need the actual Gallery object that is created. The only other option was a “setClassObject” function to provide the actual gallery object, but that would get needlessly obtrusive.

/* 
  File: gallery.js  
*/

function Gallery(id, imgs)
{
  this.id = id;
  this.imgs = imgs;
}

function init(prevID, nextID)
{
  if(nextID != null)
    this.nextObj = document.getElementById(nextID);
  if(prevID != null)
    this.prevObj = document.getElementById(prevID);
  this.curFrame = 0;
  var output = '';
  output += '<div id="'+this.id+'_images"><img src="'+this.imgs[this.curFrame]+'" id="'+this.id+'_image_'+this.curFrame+'" alt="" /></div>';
  document.getElementById(this.id).innerHTML = output;
  this.updateImage();
  this.updateButtons();
}

function next()
{
  this.curFrame++;
  this.updateImage();
  this.updateButtons();
}

function prev()
{
  this.curFrame--;
  this.updateImage();
  this.updateButtons();
}

function updateImage()
{
  document.getElementById(this.id+'_images').childNodes[0].src = imgs[this.curFrame];
}

function updateButtons()
{
  var len = this.imgs.length;
  if(typeof this.nextObj != 'undefined')
  {
    if(this.curFrame == len-1)
	  this.nextObj.disabled=true;
	else
	  this.nextObj.disabled=false;
  }
  if(typeof this.prevObj != 'undefined')
  {
    if(this.curFrame == 0)
	  this.prevObj.disabled=true;
	else
	  this.prevObj.disabled=false;
  }
}

Gallery.prototype.init=init;
Gallery.prototype.updateImage=updateImage;
Gallery.prototype.updateButtons=updateButtons;
Gallery.prototype.next=next;
Gallery.prototype.prev=prev;

And an appropriately simple implementation of that viewer is seen here,

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="gallery.js"></script>
<script type="text/javascript">
var imgs = ['image_1.jpg','image_2.jpg', 'image_3.jpg', 'image_4.jpg'];
var gallery = new Gallery('galleryImages', imgs);
function init()
{
  gallery.init('prev', 'next');
}
window.onload=init;
</script>

<title>JavaScript Image Viewer</title>
</head>

<body>
<div id="gallery" style="text-align: center">
  <div id="galleryImages"></div>
  <div id="navigation"><input type="button" id="prev" value="PREV" onclick="gallery.prev();" />
  <input type="button" id="next" value="NEXT" onclick="gallery.next()" />
  </div>
</div>
</body>
</html>

You can see the viewer in action here

Advertisements

2 Comments »

  1. Thanks!!

    Comment by Flo — March 24, 2009 @ 9:20 pm

  2. does not work

    Comment by Mirko — April 7, 2009 @ 5:39 am


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: