...

View Full Version : photoslider js question - multiple photoslides on one page



Tanya32
12-09-2006, 08:14 PM
I've found some free script on this page for a photoslider, it works really well unless you want to put more than one slide show on the same page. i've changed all the variables I can think of, but the buttons included operate the show above or below depending... I've changed the name photoslider, the two variables photos and which. I'll include the link to the page where I got the code and post the code below. My friend who is way better at scripting then me, hasn't resolved it yet either. Please advise! Thanks!!

http://www.javascriptkit.com/script/script2/pslide.shtml

I'll copy the script here:


<table border="0" cellpadding="0">
<caption><strong>Air Show Photos</strong></caption>
<tr>
<td width="100%"><img src="plane1.gif" width="300" height="240" name="photoslider"></td>
</tr>
<tr>
<td width="100%"><form method="POST" name="rotater">
<div align="center"><center><p><script language="JavaScript1.1">
var photos=new Array()
var which=0

/*Change the below variables to reference your own images. You may have as many images in the slider as you wish*/
photos[0]="plane1.gif"
photos[1]="plane2.gif"
photos[2]="plane3.gif"
photos[3]="plane4.gif"
photos[4]="plane5.gif"


function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}
else window.status='End of gallery'
}
</script><input type="button" value="&lt;&lt;Back" name="B2"
onClick="backward()"> <input type="button" value="Next&gt;&gt;" name="B1"
onClick="forward()"><br>
<a href="#" onClick="which=1;backward();return false"><small>Start Over</small></a></p>
</center></div>
</form>
</td>
</tr>
</table>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>

j9ine
12-09-2006, 09:40 PM
<html>
<head>
<script type="text/javascript">
//create a new num variable and photos array for each slideshow
var num1 = 0;
var photos1 = ["plane1.jpg","plane2.jpg","plane3.jpg","plane4.jpg","plane5.jpg"];
var num2 = 0;
var photos2 = ["plane1.jpg","plane2.jpg","plane3.jpg","plane4.jpg","plane5.jpg"];

function backward(id,photos,num) {
if (window[num]==0) {
window.status = 'End of Gallery';
return false;
}
--window[num];
window.status = '';
document.getElementById(id).setAttribute('src',window[photos][window[num]]);
}

function forward(id,photos,num){
if (window[num]==window[photos].length-1) {
window.status = 'End of Gallery';
return false;
}
++window[num];
window.status = '';
document.getElementById(id).setAttribute('src',window[photos][window[num]]);
}

function startOver(id,photos,num) {
window.status = '';
document.getElementById(id).setAttribute('src',window[photos][0]);
window[num] = 0;
}
</script>
</head>
<body>

<!--- Start of Slideshow One -->
<table border="0" cellpadding="0">
<caption><strong>Air Show Photos</strong></caption>
<tr>
<td width="100%">
<img src="plane1.jpg" width="300" height="240" id="slideshow1">
</td>
</tr>
<tr>
<td width="100%">
<form>
<div align="center">
<center>
<p>
<input type="button" value="&lt;&lt;Back" onClick="backward('slideshow1','photos1','num1');">
<input type="button" value="Next&gt;&gt;" onClick="forward('slideshow1','photos1','num1');">
<br>
<a href="javascript:startOver('slideshow1','photos1','num1');"><small>Start Over</small></a>
</p>
</center>
</div>
</form>
</td>
</tr>
</table>
<!--- End of slideshow One -->

<br><br><br>

<!--- Start of Slideshow Two -->
<table border="0" cellpadding="0">
<caption><strong>Slideshow 2</strong></caption>
<tr>
<td width="100%">
<img src="plane1.jpg" width="300" height="240" id="slideshow2">
</td>
</tr>
<tr>
<td width="100%">
<form>
<div align="center">
<center>
<p>
<input type="button" value="&lt;&lt;Back" onClick="backward('slideshow2','photos2','num2');">
<input type="button" value="Next&gt;&gt;" onClick="forward('slideshow2','photos2','num2');">
<br>
<a href="javascript:startOver('slideshow2','photos2','num2');"><small>Start Over</small></a>
</p>
</center>
</div>
</form>
</td>
</tr>
</table>
<!--- End of slideshow Two -->
</body>
</html>

Arty Effem
12-10-2006, 01:32 AM
http://www.javascriptkit.com/script/script2/pslide.shtmlYou don't want to go there - really.

Try this encapsulated example:


/*** [ < ] [ M u l t i S l i d e ] [ > ]

- Generates multiple image slideshows within one document.
- Provides Next, Previous, Start and End controls
- Automated Preloading.
- Very easy setup.

-Installation-

Save this file as 'multislide.js' and copy it to a suitable folder of your website.

In the <HEAD> section of the document, insert the text:

<SCRIPT type='text/javascript' src='multislide.js'></SCRIPT>

(if multislide.js resides in a different folder, include the relative path)

-Configuration-

In your HTML code, assign a NAME attribute to the image placeholder that will display the slideshow images.
Example: <img src='defaultpic.jpg' name='slideImg' .........>

The slideshow is initialised by a single function call to the MultiSlide.show function.
In the <BODY> section, at a point below the target image placeholder, insert the following text:

<SCRIPT type='text/javascript'>

MultiSlide.show('myShow1','slideImg','myPic1.jpg','myPic2.jpg','myPic3.jpg');

// Add more slideshows here if desired, providing a different name for each.
// Multiple slideshows can be specified to share the same target image holder.

</SCRIPT>

The parameters passed to MultiSlide.show, must be replaced with your own values as explained next:

First parameter - The name of the slideshow. This can be any unique name.

Second parameter - The NAME attribute of the target image placeholder (not its ID if it has one)

All subsequent parameters specify the images involved in the specified slideshow.

There is no limit to the number of images that may be specified.

All parameters must be within quotation marks and separated by commas in the format shown.

There must be no comma following the last parameter.

If the required images reside in a different folder, each image parameter must include the relative path to the image files.

Below are some selection controls consistent with the example above. The parameter is the name of the associated slideshow, passed as the first parameter of SmartSlide.show

<FORM>
<input type='button' onclick='MultiSlide.start("myShow1")'value='|<'>
<input type='button' onclick='MultiSlide.prev("myShow1")' value='<'>
<input type='button' onclick='MultiSlide.next("myShow1")' value='>'>
<input type='button' onclick='MultiSlide.end("myShow1")' value='>|'>
</FORM>

<A HREF='#' onclick='return MultiSlide.start("myShow1")'> |&lt; </A>
<A HREF='#' onclick='return MultiSlide.prev("myShow1")'> &lt;Prev </A>
<A HREF='#' onclick='return MultiSlide.next("myShow1")'> Next&gt; </A>
<A HREF='#' onclick='return MultiSlide.end("myShow1")'> &gt;| </A>

** DO NOT EDIT BELOW THIS LINE **/

MultiSlide=/*(C)"Arty Effem"*/
{
imageSets:[],

show:function(showId, imgHolder)
{
if(typeof this.imageSets[showId]=='undefined')
{
this.imageSets[showId]=[];
this.imageSets[showId].holder=imgHolder;
this.imageSets[showId].pos=0;

for(var j=2; j<arguments.length; j++)
{
this.imageSets[showId][j-2]=new Image();
this.imageSets[showId][j-2].src=arguments[j];
}
}
else
alert('ID "'+showId+'" used more than once - please correct.');
},

next:function(showId)
{
var set=this.imageSets[showId];

if(set.pos<set.length-1)
{
set.pos++;
document.images[set.holder].src=set[set.pos].src;
}
return false;
},

prev:function(showId)
{
var set=this.imageSets[showId];
if(set.pos>0)
{
set.pos--;
document.images[set.holder].src=set[set.pos].src;
}
return false;
},

start:function(showId)
{
var set=this.imageSets[showId];
set.pos=0;
document.images[set.holder].src=set[set.pos].src;

return false;
},

end:function(showId)
{
var set=this.imageSets[showId];
set.pos=set.length-1;
document.images[set.holder].src=set[set.pos].src;

return false;
}

}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum