...

View Full Version : Need help with javascript code for my clickable slideshow.



Lady Shaw Shaw
01-18-2012, 04:45 PM
My slideshow links will only open inside my inline frame. I'm sure there's something simple I need to change in the code to make it open full screen. Here is my code. Any help would be so much appreciated! Thank you.

Shawnel


<head>
<style type="text/css">
.style1 {
vertical-align: top;
}
</style>
</head>

<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="Images/Picture Box/PictureBox1.jpg"
var image2=new Image()
image2.src="Images/Picture Box/PictureBox2.jpg"
var image3=new Image()
image3.src="Images/Picture Box/PictureBox3.jpg"
var image4=new Image()
image4.src="Images/Picture Box/PictureBox4.jpg"
var image5=new Image()
image5.src="Images/Picture Box/PictureBox5.jpg"
//-->
</script>

<body style="margin-top: 0">

&nbsp;<a href="javascript:slidelink()"><img src="Images/Picture Box/PictureBox1.jpg" name="slide" border="0" width="539" height="314" class="style1" /></a>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<5)
step++
else
step=1
setTimeout("slideit()",3000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="learnmore.htm"
else if (whichimage==2)
window.location="contactus.htm"
else if (whichimage==3)
window.location="hungerheroes.htm"
else if (whichimage==4)
window.location="donate.htm"
else if (whichimage==5)
window.location="volunteer.htm"
}
//-->
</script>

Old Pedant
01-19-2012, 01:15 AM
So *IS* this code you are showing being run inside an <iframe>??

If so, the answer is simple. Just change

window.location = "...."

to


top.location = "..."

jmrker
01-19-2012, 05:49 AM
You don't show the <iframe> code and I don't know where your images are located,
but this example compresses you code a bit. :eek:

Assumes you used 'Old Pedant's suggestion... :thumbsup:


<html>
<head>
<style type="text/css">
.style1 { vertical-align: top; }
</style>

<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?t=249176

/*
var baseURL = 'Images/Picture Box/';
var imgList = [
"PictureBox1.jpg","PictureBox2.jpg","PictureBox3.jpg","PictureBox4.jpg","PictureBox5.jpg",
];
*/
// This is test code for above
var baseURL = "http://www.nova.edu/hpd/otm/pics/4fun/";
var imgList = [
"11.jpg", "12.jpg", "13.jpg", "14.jpg", "15.jpg",
];

var step=0; // variable that will increment through the images

function slideit(){
//if browser does not support the image object, exit.
if (!document.images) { return; }

if (step < imgList.length-1) { step++; } else { step=0; }
document.images.slide.src = baseURL+imgList[step];

//call function "slideit()" every 3 seconds
setTimeout("slideit()",3000);
}

function slidelink() {
switch (step) {
case 0 : top.location="learnmore.htm"; break;
case 1 : top.location="contactus.htm"; break;
case 2 : top.location="hungerheroes.htm"; break;
case 3 : top.location="donate.htm"; break;
case 4 : top.location="volunteer.htm"; break;
}
}

window.onload = function() { slideit(); }

</script>
</head>

<body style="margin-top: 0">
&nbsp;<a href="#" onclick="slidelink()">
<img src="" name="slide" border="0" width="539" height="314" class="style1" /></a>
</body>
</html>

Lady Shaw Shaw
01-20-2012, 05:24 PM
Thank you! Thank you! Thank you! Both answers worked great! :)

jmrker
01-20-2012, 08:57 PM
Thank you! Thank you! Thank you! Both answers worked great! :)

You're most welcome.
Happy to help, I'm sure, from both of us.
Good Luck!
:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum