Computing

Multiple Galleries with Captions

2. Obtain the Script

More of this Feature

The first thing you need to do to be able to use my gallery script is to copy the following JavaScript and save it as gallery.js.

This code contains the gallery object definition which we will use to create all our photo/image galleries (complete with captions).

// Multiple Picture Galleries with Captions
// copyright 9th October 2010 by Stephen Chapman
// http://javascript.about.com
// permission to use this Javascript on your web page is granted
// provided that all of the code below in this script (including these
// comments) is used without any alteration
function Gallery(id,w,h,a,delay) {var self = this;self.x = 0;self.h = new Image(); self.h.src = a[1].img; self.a = a;self.c = a.length;self.pre = id;self.id = document.getElementById(id);var i = document.createElement('img');i.id = self.pre+'img';i.style.w = w + 'px';i.style.h = h + 'px'; i.alt = 'gallery';i.src = a[0].img;self.id.appendChild(i);self.id.appendChild(document.createElement('br'));var t = document.createTextNode(a[0].caption);var c = document.createElement('span');c.id = self.pre+'cap';c.appendChild(t);self.id.appendChild(c); setInterval(function() {self.nextImg(self);},delay); return self;}; Gallery.prototype.update = function(self) {document.getElementById(self.pre+'img').src = self.a[self.x].img;var t = document.createTextNode(self.a[self.x].caption);var c = document.createElement('span');c.id = self.pre+'cap';c.appendChild(t);var sc = document.getElementById(self.pre+'cap');sc.parentNode.replaceChild(c,sc);}; Gallery.prototype.nextImg = function(self) {self.x++;if (self.x >= self.c) self.x = 0; if (self.a[self.x+1]) self.h.src = self.a[self.x+1].img; self.update(self);};

You next attach the script into your web page that you wish to display your slideshows on by adding the following code into the end of the body section of your page (immediately before the *lt;/body> tag. We'll add a second script tag as well which will contain the definition of our galleries for this page. By placing the code in separate scripts we can reuse the gallery script for different galleries on different pages without having multiple copies of the code.

We also need to place div tag(s) in the body of the page where you want the gallery or galleries to appear and give each an id that the script can use to identify where to put each gallery. You can use whatever ids you like as long as they are all unique.

With that in place all that remains is to define the galleries that we want to appear in each of those divs.

Apply now to guide this site

Discuss in our forum

See More About