...

View Full Version : Multiple galleries/slideshows on one page



tbr
07-11-2006, 05:33 PM
Hello, I need a script that can change an image when you click it, and step through a number of different images, like a slideshow (no "previous" button, just next). I want to have several on one page, but I would still like to use only one script. Preferably I want to write the img tag something like this:


<img src="mypic1.gif" onclick="swapimage(mypic1.gif, mypic2.gif, mypic3.gif etc)"/>

I don't know exactly how to do this, I've tried to adapt several scripts but it doesn't quite work. One example that is close to what I want is the following:

http://javascript.about.com/library/blslide1.htm

How can I adapt it so it works like I explained above? I'm pretty new with Javascript so any help would be very appreciated!

Thanks!

vwphillips
07-11-2006, 06:35 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips (10-July-2006) - http://www.vicsjavascripts.org.uk/


function zxcSlideShow(){
var zxcargs=zxcSlideShow.arguments;
var zxcobj=zxcargs[0];
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!window['zxcSlideShow'+zxcobj.id]){
var zxcary=[0,zxcargs[1]];
for (var zxc0=2;zxc0<zxcargs.length;zxc0++){
zxcary.push(zxcargs[zxc0]);
}
window['zxcSlideShow'+zxcobj.id]=zxcary;
}
var zxcary=window['zxcSlideShow'+zxcobj.id];
zxcary[0]=++zxcary[0]%(zxcary.length-2);
zxcobj.src=zxcary[1]+zxcary[zxcary[0]+2];
}


//-->
</script>
</head>

<body>
<img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=100 height=100
onclick="zxcSlideShow(this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
<br>
<input type="button" name="" value="Fwd" onclick="zxcSlideShow('Img1','http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')">
<br>
<br>
<br>
<img id="Img2" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width=100 height=100
onclick="zxcSlideShow(this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
<br>
<input type="button" name="" value="Fwd" onclick="zxcSlideShow('Img2','http://www.vicsjavascripts.org.uk/StdImages/','Zero.gif','One.gif', 'Two.gif', 'Three.gif','Four.gif','Five.gif','Six.gif')">
</body>

</html>

vwphillips
07-11-2006, 06:56 PM
with application notes


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// Basic Slide Show (10-July-2006)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

// A very basic Slide Show defined as an image in the HTML code.
// The Slide Show images are defined in the activating call
// which also changes the image to the next image.
//
// There may be as many applications on a page as required.
//
//
// ***** Application Notes

// **** The HTML Code
//
// Each Slide Show is defined as an image in the HTML code.
// Each Slide Show image must be assigned with a unique ID name.
// e.g.
// <img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100" >
//

// **** Activating(Rotating) a Slide Show
//
// The Slide Show is 'rotated to the next image by a event call to function 'zxcSlideShow'
// Example by clicking the image:
// <img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100"
// onclick="zxcSlideShow(this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
// Example by clicking a button:
// <input type="button" name="" value="Fwd" onclick="zxcSlideShow('Img1','http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')">
//
// where:
// parameter 0 = the image object or unique ID name. (string)
// parameter 1 = the common directory path for all images. (string)
// or '' and specify the path as part of the image file name
// subsequent parameters:
// the image file name of the Slide Show images (string)
//


// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
// These characters are easily changed to characters of choice using global find and replace.

// The functional code(about 0.5K) is best as an external JavaScript

// Tested with IE6 and Mozilla FireFox


// ***** Functional Code NO NEED to Change

function zxcSlideShow(){
var zxcargs=zxcSlideShow.arguments;
var zxcobj=zxcargs[0];
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!window['zxcSlideShow'+zxcobj.id]){
var zxcary=[0,zxcargs[1]];
for (var zxc0=2;zxc0<zxcargs.length;zxc0++){
zxcary.push(zxcargs[zxc0]);
}
window['zxcSlideShow'+zxcobj.id]=zxcary;
}
var zxcary=window['zxcSlideShow'+zxcobj.id];
zxcary[0]=++zxcary[0]%(zxcary.length-2);
zxcobj.src=zxcary[1]+zxcary[zxcary[0]+2];
}


//-->
</script>
</head>

<body>
<img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=100 height=100
onclick="zxcSlideShow(this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
<br>
<input type="button" name="" value="Fwd" onclick="zxcSlideShow('Img1','http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')">
<br>
<br>
<br>
<img id="Img2" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width=100 height=100
onclick="zxcSlideShow(this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
<br>
<input type="button" name="" value="Fwd" onclick="zxcSlideShow('Img2','http://www.vicsjavascripts.org.uk/StdImages/','Zero.gif','One.gif', 'Two.gif', 'Three.gif','Four.gif','Five.gif','Six.gif')">
</body>

</html>

PS
will only be a couple more lines to give this fwd, back functionality

tbr
07-11-2006, 07:59 PM
Thank you for that quick reply, it works perfectly! Seems to be exactly what I was after. I'll give you credit on the website, once it's up (http://www.olofbruce.se/). Big thanks!

vwphillips
07-11-2006, 08:04 PM
with the fwd, back functionality.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// Basic Slide Show (10-July-2006)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

// A very basic Slide Show defined as an image in the HTML code.
// The Slide Show images are defined in the activating call
// which also changes the image to either the 'Next' or 'Back'.
//
// There may be as many applications on a page as required.
//
//
// ***** Application Notes

// **** The HTML Code
//
// Each Slide Show is defined as an image in the HTML code.
// Each Slide Show image must be assigned with a unique ID name.
// e.g.
// <img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100" >
//

// **** Activating(Rotating) a Slide Show
//
// The Slide Show is 'rotated to the next image by a event call to function 'zxcSlideShow'
// Example by clicking the image:
// <img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100"
// onclick="zxcSlideShow(1,this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
// Example by clicking a button:
// <input type="button" name="" value="Next" onclick="zxcSlideShow(1,'Img1','http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')">
// <input type="button" name="" value="Back" onclick="zxcSlideShow(-1,'Img1','http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')">
//
// where:
// parameter 0 = rotation, 1 = next, -1 = back. (1 or -1)
// parameter 1 = the image object or unique ID name. (string)
// parameter 2 = the common directory path for all images. (string)
// or '' and specify the path as part of the image file name
// subsequent parameters:
// the image file name of the Slide Show images (string)
//


// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
// These characters are easily changed to characters of choice using global find and replace.

// The functional code(about 0.6K) is best as an external JavaScript

// Tested with IE6 and Mozilla FireFox


// ***** Functional Code NO NEED to Change

function zxcSlideShow(){
var zxcargs=zxcSlideShow.arguments;
var zxcobj=zxcargs[1];
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!window['zxcBSS'+zxcobj.id]){
var zxcary=[0];
for (var zxc0=3;zxc0<zxcargs.length;zxc0++){
zxcary.push(zxcargs[zxc0]);
}
window['zxcBSS'+zxcobj.id]=zxcary;
}
var zxcary=window['zxcBSS'+zxcobj.id];
zxcary[0]+=zxcargs[0];
if (zxcary[0]<0){zxcary[0]=zxcary.length-2; }
if (zxcary[0]==zxcary.length-1){zxcary[0]=0; }
zxcobj.src=zxcargs[2]+zxcary[zxcary[0]+1];
}


//-->
</script>
</head>

<body>
<img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=100 height=100
onclick="zxcSlideShow(this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
<br>
<input type="button" name="" value="Next" onclick="zxcSlideShow(1,'Img1','http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')">
<input type="button" name="" value="Back" onclick="zxcSlideShow(-1,'Img1','http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')">
<br>
<br>
<br>
<img id="Img2" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width=100 height=100
onclick="zxcSlideShow(this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
<br>
<input type="button" name="" value="Fwd" onclick="zxcSlideShow(1,'Img2','http://www.vicsjavascripts.org.uk/StdImages/','Zero.gif','One.gif', 'Two.gif', 'Three.gif','Four.gif','Five.gif','Six.gif')">
</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum