Need Help With SlideShow+URL link

Forum Moderators: open

Message Too Old, No Replies

Need Help With SlideShow+URL link

RegGFX

5:42 am on Jan 16, 2005 (gmt 0)

Hi all in the Javascript Forum....

Excuse me for my Javascript knowledge being pretty basic but I seek the aid of the forum to help me with a problem..
I'm trying to modify some script for a SlideShow.
The script works fine but here is my problem.

I'm unable to associate a clickable URL with each slide image.

I would appreciate it GREATLY if someone could show me how to modify this script to accept URL with each image.

Thanks ANYBODY PLEASE RSVP

P.S. i actually like the slide show that www.msn.com is running on their home page, but i can't find a sample online so i'm starting from scratch. Again... I'd appreciate ANY JAVASCRIPT GURU'S HELP

[edited by: jatar_k at 5:46 pm (utc) on Aug. 1, 2006]

RegGFX

4:02 pm on Jan 17, 2005 (gmt 0)

Well i'm still trying to make the images clickable...

Here is my raw code if anybody has an idea what i could try
_________________________________________________
<script language="JavaScript">// begin dHTML SlideShow Script

if(document.images) {
currentslide=1;
maxslides=3;
slide = new Array(maxslides+1);
for(var n=1;n<=maxslides;n++) {
slide[n]=new Image(320,240);
slide[n].src=+n+'.jpg';
}
}

function prevSlide() {
if(document.images) {
currentslide--;
if(currentslide<1) currentslide=maxslides;
document.images['slide'].src=slide[currentslide].src;
}
}

function nextSlide() {
if(document.images) {
currentslide++;
if(currentslide>maxslides) currentslide=1;
document.images['slide'].src=slide[currentslide].src;
}
}
// end dHTML SlideShow Script
</script>
__________________________________________

<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td height=5 colspan=2> </td>
</tr>
<tr valign=bottom align=center>
<td height=240 colspan=2><img name='slide' width=320 height=240 border=0 hspace=0 vspace=0 alt='slideshow' src='1.jpg'></td>
</tr>
<tr>
<td height=5 colspan=2> </td>
</tr>
<tr>
<td height=5 align=left><a href='javascript:prevSlide()'>Previous</a></td>
<td height=5 align=right><a href='javascript:nextSlide()'>Next</a></td>
</tr>
</table>

adni18

7:33 pm on Jan 17, 2005 (gmt 0)

You can add an array with the URLs, and then access the array, changing the href attribute of a surrounding <A> tag to that URL. I'm working on an imitation MSN-slideshow, but it may take a while.

adni18

8:25 pm on Jan 17, 2005 (gmt 0)

Here's the imitation. There are obviously a few things to be cleaned up here and there, like its gradual acceleration, but, hey.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Slide Show</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">

</script>
</head>
<body>
<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td height=5 colspan=2> </td>
</tr>
<tr valign=bottom align=center>
<td height=240 colspan=2>
<A id="disp-link" href="1.html">
<img id="disp-slide" width=320 height=240 border=0 hspace=0 vspace=0 alt="" src="1.jpg" style="-moz-opacity:1;filter:alpha(opacity=100)">
</A>
</td>
</tr>
<tr>
<td height=5 colspan=2> </td>
</tr>
<tr>
<td height=5 align=left><a href='javascript:prevSlide()'>Previous</a></td>
<td height=5 align=right><a href='javascript:nextSlide()'>Next</a></td>
</tr>
</table>
</body>
</html>

adni18

11:06 pm on Jan 17, 2005 (gmt 0)

Here's the revised code, without unwanted acceleration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Slide Show</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">

</script>
</head>
<body>
<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td height=5 colspan=2> </td>
</tr>
<tr valign=bottom align=center>
<td height=240 colspan=2>
<A id="disp-link" href="1.html">
<img id="disp-slide" width=320 height=240 border=0 hspace=0 vspace=0 alt="" src="1.jpg" style="-moz-opacity:1;filter:alpha(opacity=100)">
</A>
</td>
</tr>
<tr>
<td height=5 colspan=2> </td>
</tr>
<tr>
<td height=5 align=left><a href='javascript:prevSlide()'>Previous</a></td>
<td height=5 align=right><a href='javascript:nextSlide()'>Next</a></td>
</tr>
</table>
</body>
</html>

adni18

11:06 pm on Jan 17, 2005 (gmt 0)

Here's the revised code, without unwanted acceleration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Slide Show</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">

</script>
</head>
<body>
<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td height=5 colspan=2> </td>
</tr>
<tr valign=bottom align=center>
<td height=240 colspan=2>
<A id="disp-link" href="1.html">
<img id="disp-slide" width=320 height=240 border=0 hspace=0 vspace=0 alt="" src="1.jpg" style="-moz-opacity:1;filter:alpha(opacity=100)">
</A>
</td>
</tr>
<tr>
<td height=5 colspan=2> </td>
</tr>
<tr>
<td height=5 align=left><a href='javascript:prevSlide()'>Previous</a></td>
<td height=5 align=right><a href='javascript:nextSlide()'>Next</a></td>
</tr>
</table>
</body>
</html>

RegGFX

5:16 am on Jan 18, 2005 (gmt 0)

But HEY�.
THIS IS GRRRRRREAT (GREAT!)

You�ve done awesome�.. AWWWWWSOMMMMMME.

Wow� this is fantastic. I think it�s the best msn imitation so far�"reverse engineered of course."

Do you think it is possible to ad caption text or hyperlink? By assigning an ID= in a div tag? And inside the div tag you can create whatever text link you want while it�s the
disp-slide-caption ID variable will transition just like on the real msn slideshow
So that it reads <div id="disp-slide-caption" ect. Ect.

I really like how you built your array and I tried to ad an array for a div tag which lays over the image or table.

Unfortunately� it appears that all my attempt has done is butcher your well put together code.

My attempt at creating an array for the div tag just doesn�t work right.
I think my attempt at using
document.getElementById("disp-slide-caption").div=images[currNum].split(" : ")[2];

is upsetting the JavaScript gods.
Got any ideas? -- Please Advise...
P.S. please forgive me for the butchering of your wonderfully put together code to make this work.
I just wanted to try a theory about what i know about DIV Layer tags.

Please see sample below
*************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Slide Show</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
fadeStep=10; // Size of the fade "step". Must be a multiple of 100.

fadeInterval=10; // Amount of time in-between the increments of fading

readingTime=7; // Amount of time the user has to see the image (seconds)

images=new Array("1.jpg : site1.htm : Caption1","2.jpg : site2.htm : Caption2","3.jpg : site3.htm : Caption3");

/* Do not edit the following variables */
var currTransp=100;
var currDir=0;
var currNum=0;

function nextSlide()
{
currNum++;
if(currNum == images.length)
{
currNum=0;
}
document.getElementById("disp-slide").src=images[currNum].split(" : ")[0];
document.getElementById("disp-link").href=images[currNum].split(" : ")[1];
// Not Sure about this line... i may be ticking off the JavaScript gods
document.getElementById("disp-slide-caption").div=images[currNum].split(" : ")[2];
}

function prevSlide()
{
currNum--;
if(currNum == -1)
{
currNum=images.length-1;
}
document.getElementById("disp-slide").src=images[currNum].split(" : ")[0];
document.getElementById("disp-link").href=images[currNum].split(" : ")[1];
// Again - Not Sure about this line... i may be ticking off the JavaScript gods
document.getElementById("disp-slide-caption").div=images[currNum].split(" : ")[2];
}

function fadeSlide()
{

john=window.setTimeout("fadeSlide()", fadeInterval);

if(currTransp == 100 - fadeStep && currDir == 1)
{
window.clearTimeout(john);
}

if(currTransp < 0)
{
currTransp=0;
}

if(currTransp > 100)
{
currTransp=100;
}

if(currDir==0 && currTransp > 0)
{
currTransp=currTransp-fadeStep;

if(navigator.appName=="Netscape")
{
document.getElementById("disp-slide").style.MozOpacity=currTransp/100;
}

if(navigator.appName=="Microsoft Internet Explorer")
{
document.getElementById("disp-slide").style.filter="alpha(opacity="+currTransp+")";
}

}

else if(currDir==1 && currTransp < 100)
{
currTransp=currTransp+fadeStep;

if(navigator.appName=="Netscape")
{
document.getElementById("disp-slide").style.MozOpacity=currTransp/100;
}

if(navigator.appName=="Microsoft Internet Explorer")
{
document.getElementById("disp-slide").style.filter="alpha(opacity="+currTransp+")";
}

}

else if(currDir==0 && currTransp == 0)
{
currDir=1;
nextSlide();
}

if(currDir==1 && currTransp == 100)

{
window.setTimeout("commenceFade()", (readingTime * 1000));
}

}

function commenceFade()
{
currDir=0;
fadeSlide();
}

window.setTimeout("commenceFade()", readingTime * 1000 );

//-->
</script>
<script language="JavaScript" type="text/JavaScript">

</script>
</head>

<body>

</td>
</tr>
<tr>
<td height=5 colspan=2> </td>
</tr>
<tr>
<td height=5 align=left><a href='javascript:prevSlide()'>Previous</a></td>
<td height=5 align=right><a href='javascript:nextSlide()'>Next</a></td>
</tr>
</table>

</body>
</html>

adni18

10:12 pm on Jan 18, 2005 (gmt 0)

I redid the script which should make the captions fade with the image, but it doesn't (at least in IE), because MSIE doesn't like doing fades to text. However, I'm sure with a little bit of work, it can be improved:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Slide Show</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
fadeStep=10; // Size of the fade "step". Must be a multiple of 100.
fadeInterval=10; // Amount of time in-between the increments of fading

readingTime=7; // Amount of time the user has to see the image (seconds)

images=new Array("1.jpg : 1.html : Caption 1","2.jpg : 2.html : Caption 2","3.jpg : 3.html : Caption 3");

/* Do not edit the following variables */
var currTransp=100;
var currDir=0;
var currNum=0;

function nextSlide()
{
currNum++;
if(currNum == images.length)
{
currNum=0;
}
document.getElementById("disp-slide").src=images[currNum].split(" : ")[0];
document.getElementById("disp-link").href=images[currNum].split(" : ")[1];
document.getElementById("disp-slide-cap").innerHTML=images[currNum].split(" : ")[2];

}

function prevSlide()
{
currNum--;
if(currNum == -1)
{
currNum=images.length-1;
}
document.getElementById("disp-slide").src=images[currNum].split(" : ")[0];
document.getElementById("disp-link").href=images[currNum].split(" : ")[1];
document.getElementById("disp-slide-cap").innerHTML=images[currNum].split(" : ")[2];
}

function fadeSlide()
{

john=window.setTimeout("fadeSlide()", fadeInterval);

if(currTransp == 100 - fadeStep && currDir == 1)
{
window.clearTimeout(john);
}

if(currTransp < 0)
{
currTransp=0;
}

if(currTransp > 100)
{
currTransp=100;
}

if(currDir==0 && currTransp > 0)
{
currTransp=currTransp-fadeStep;

if(navigator.appName=="Netscape")
{
document.getElementById("disp-slide").style.MozOpacity=currTransp/100;
document.getElementById("disp-slide-cap").style.MozOpacity=currTransp/100;
}

if(navigator.appName=="Microsoft Internet Explorer")
{
document.getElementById("disp-slide").style.filter="alpha(opacity="+currTransp+")";
document.getElementById("disp-slide-cap").style.filter="alpha(opacity="+currTransp+")";
}

}

else if(currDir==1 && currTransp < 100)
{
currTransp=currTransp+fadeStep;

if(navigator.appName=="Netscape")
{
document.getElementById("disp-slide").style.MozOpacity=currTransp/100;
document.getElementById("disp-slide-cap").style.MozOpacity=currTransp/100;
}

}

else if(currDir==0 && currTransp == 0)
{
currDir=1;
nextSlide();
}

if(currDir==1 && currTransp == 100)

{
window.setTimeout("commenceFade()", (readingTime * 1000));
}

}

function commenceFade()
{
currDir=0;
fadeSlide();
}

window.setTimeout("commenceFade()", readingTime * 1000 );

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

<body>

<A id="disp-link" href="1.html">
<img id="disp-slide" width=320 height=240 border=0 hspace=0 vspace=0 alt="" src="1.jpg" style="-moz-opacity:1;filter:alpha(opacity=100)">
</A>
<br>
<DIV id="disp-slide-cap" style="font-size:24pt">Caption 1</DIV>

</body>
</html>

RegGFX

4:23 pm on Jan 19, 2005 (gmt 0)

HEY this is Great... you should get Javascript GURU of the Month or something...

I think i have a work-a-round for making the text fade...either way... I think what you've come up with is best. I Just couldn't get the JavaScript Syntax right.

The work-a-round i came up with in a test to make the text fade with the image worked... but it was a little odd looking....i just need to refine it... i'll post it when i finish testing to see what you think...