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
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
Log in or Register for free to comment
Recently Spotted:
*crickets*