Very Simple JavaScript Image Viewer
Log in or Register for free to comment
Recently Spotted:
robio (7m)
Login @ The VG Press
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
---
Tell me to get back to rewriting this site so it's not horrible on mobile