Log in

View Full Version : need help making slideshow images load to new page


Silkie
01-15-2007, 09:21 PM
Hello,

I normally don't use alot of javascripts on my sites. I prefer php, but I am in need of a slideshow and it seemed like it was the way to go, since I rarely use javascripts, I most often grab a freebie when I need one and that last time that happened was a few years ago.

anyhow, I need a slideshow that has a drop down box, play, stop, previous, next, zoom in and zoom out functions. I found one from perlscriptsjavascripts.com that works perfectly for that but I also need it so that when you click on the image it takes you to a new page. that's where i"m stuck.

I have been searching for a couple of days for an answer and I"ve tried several different methods and nothing works. What should logically work is just not responding.


Here's the code:



<head>
<script>
<!--
/*
SlideShow. Written by PerlScriptsJavaScripts.com
Copyright http://www.perlscriptsjavascripts.com
Free and commercial Perl and JavaScripts
*/

// transition effect. number between 0 and 23, 23 is random effect
effect = 23;

// transition duration. number of seconds effect lasts
duration = 1.5;

// seconds to diaply each image?
display = 5;

// width of stage (first image)
oW = 150;

// height of stage
oH = 93;

// zoom width by (add or subtracts this many pixels from image width)
zW = 40;

// zoom height by
zH = 30;

// path to image/name of image in slide show. this will also preload all images
// each element in the array must be in sequential order starting with zero (0)
SLIDES = new Array();

SLIDES[0] = ["http://www.allcotrailers.com/images/js/04b.jpg", "Featured Equipment"];
SLIDES[1] = ["http://www.allcotrailers.com/images/various4.jpg", "Bottom Dumps"];
SLIDES[2] = ["http://www.allcotrailers.com/images/various1.jpg", "Lightweight Bottom Dumps"];
SLIDES[3] = ["http://www.allcotrailers.com/images/various2.jpg", "Transfers"];
SLIDES[4] = ["http://www.allcotrailers.com/images/t10.gif", "10 Wheel Dumps"];
SLIDES[5] = ["http://www.allcotrailers.com/images/various3.jpg", "End Dump"];


// end required modifications

S = new Array();
for(a = 0; a < SLIDES.length; a++){
S[a] = new Image(); S[a].src = SLIDES[a][0];
}
// -->
</script>
<style>
<!--
input { width: 80px; font-size: 10px; }
// -->
</style>
</head>

<body>
<table align="center" border="0" cellpadding="3" cellspacing="0" width="250">
<form name="_slideShow">
<input type="Hidden" name="currSlide" value="0">
<input type="Hidden"name="delay">
<tr>
<td>
<table style="border: white outset 2px;" cellpadding="0" cellspacing="0" width="100%"><tr><td align="center">

<a href="javascript:;" onclick="startSS()"><img src="http://www.allcotrailers.com/images/js/toolplay.gif" alt="" border="0"></a>
<a href="javascript:;" onclick="stopSS()"><img src="http://www.allcotrailers.com/images/js/toolstop.gif" alt="" border="0"></a>
<img src="http://www.allcotrailers.com/images/js/toolsep.gif" alt="" border="0">
<a href="javascript:;" onclick="prevSS()"><img src="http://www.allcotrailers.com/images/js/toolprev.gif" alt="" border="0"></a>
<a href="javascript:;" onclick="nextSS()"><img src="http://www.allcotrailers.com/images/js/toolnext.gif" alt="" border="0"></a>
<img src="http://www.allcotrailers.com/images/js/toolsep.gif" alt="" border="0">
<a href="javascript:;" onclick="zoom(zW, zH)"><img src="http://www.allcotrailers.com/images/js/toolin.gif" alt="" border="0"></a>
<a href="javascript:;" onclick="zoom(-zW, -zH)"><img src="http://www.allcotrailers.com/images/js/toolout.gif" alt="" border="0"></a>
<img src="http://www.allcotrailers.com/images/js/toolsep.gif" alt="" border="0">
<a href="javascript:;" onclick="zoom('')"><img src="http://www.allcotrailers.com/images/js/toolreset.gif" alt="" border="0"></a>
<select name="wichIm" style="width: 100%; font-size: 10px;" onchange="selected(this.options[this.selectedIndex].value)">
</select>
</td></tr></table>
</td>
</tr>
<tr>
<td align="center">
<table width="250" height="133" cellpadding="0" cellspacing="0" style="border: white inset 2px;"><tr><td align="center"><img name="stage" border="0" src="http://www.allcotrailers.com/images/js/04b.jpg" style="filter: revealtrans(); font-size:12;"></td></tr></table>
<BR><BR><BR>
</td>
</tr>
</form>
</table>

<script>
<!--

f = document._slideShow;
n = 0;
t = 0;

document.images["stage"].width = oW;
document.images["stage"].height = oH;
f.delay.value = display;

// add image numbers to select menu
f.wichIm.options.length = 0;
for(i in SLIDES){
f.wichIm.options[i] = new Option(SLIDES[i][1],i);
}

function startSS(){
t = setTimeout("runSS(" + f.currSlide.value + ")", 1 * 1);
}

function runSS(n){
n++;
if(n >= SLIDES.length){
n = 0;
}
document.images["stage"].src = S[n].src;
if(document.all && navigator.userAgent.indexOf("Opera") < 0 && navigator.userAgent.indexOf("Windows") >= 0){
document.images["stage"].style.visibility = "hidden";
document.images["stage"].filters.item(0).apply();
document.images["stage"].filters.item(0).transition = effect;
document.images["stage"].style.visibility = "visible";
document.images["stage"].filters(0).play(duration);
}
f.currSlide.value = n;
f.wichIm[n].selected = true;
t = setTimeout("runSS(" + f.currSlide.value + ")", f.delay.value * 1000);
}

function stopSS(){
if(t){
t = clearTimeout(t);
}
}

function nextSS(){
stopSS();
n = f.currSlide.value;
n++;
if(n >= SLIDES.length){
n = 0;
}
if(n < 0){
n = SLIDES.length - 1;
}
document.images["stage"].src = S[n].src;
f.currSlide.value = n;
f.wichIm[n].selected = true;
if(document.all && navigator.userAgent.indexOf("Opera") < 0 && navigator.userAgent.indexOf("Windows") >= 0){
document.images["stage"].style.visibility = "hidden";
document.images["stage"].filters.item(0).apply();
document.images["stage"].filters.item(0).transition = effect;
document.images["stage"].style.visibility = "visible";
document.images["stage"].filters(0).play(duration);
}
}

function prevSS(){
stopSS();
n = f.currSlide.value;
n--;
if(n >= SLIDES.length){
n = 0;
}
if(n < 0){
n = SLIDES.length - 1;
}
document.images["stage"].src = S[n].src;
f.currSlide.value = n;
f.wichIm[n].selected = true;

if(document.all && navigator.userAgent.indexOf("Opera") < 0 && navigator.userAgent.indexOf("Windows") >= 0){
document.images["stage"].style.visibility = "hidden";
document.images["stage"].filters.item(0).apply();
document.images["stage"].filters.item(0).transition = effect;
document.images["stage"].style.visibility = "visible";
document.images["stage"].filters(0).play(duration);
}
}

function selected(n){
stopSS();
document.images["stage"].src = S[n].src;
f.currSlide.value = n;

if(document.all && navigator.userAgent.indexOf("Opera") < 0 && navigator.userAgent.indexOf("Windows") >= 0){
document.images["stage"].style.visibility = "hidden";
document.images["stage"].filters.item(0).apply();
document.images["stage"].filters.item(0).transition = effect;
document.images["stage"].style.visibility = "visible";
document.images["stage"].filters(0).play(duration);
}
}

function zoom(dim1, dim2){
if(dim1){
if(document.images["stage"].width < oW){
document.images["stage"].width = oW;
document.images["stage"].height = oH;
} else {
document.images["stage"].width += dim1;
document.images["stage"].height += dim2;
}
if(dim1 < 0){
if(document.images["stage"].width < oW){
document.images["stage"].width = oW;
document.images["stage"].height = oH;
}
}
} else {
document.images["stage"].width = oW;
document.images["stage"].height = oH;
}
}
// -->
</script>
</body>

If I add the URL to where i want it to go like this,


SLIDES[1] = ["http://www.allcotrailers.com/images/various4.jpg", "http://www.allcotrailers.com/trailers.bd40.html", "Bottom Dumps"];

it stops the drop down menu from working and instead it becomes blank. I"m wondering if I need to add a function or array to the script but I"m not totally sure how I would go about doing that, where I would add it or if I even need to do that.

Can someone clue me into what I"m missing here and what I need to do?

here's the url where you can see the slideshow in action as it's already running nicely aside from being clickable.

http://www.allcotrailers.com

p.s. I"m just starting this site so there ain't nothing there yet except the basic layout and the drop down box.

thanks in advance.