Fading slideshow with menu

[ryancarder21]

Im very html educated, although my knowledge of java script is limited. I would like to know how I could combine the following two scripts so that the fading slideshow will have a back, play, stop, forward options below the slide show. The links to the scripts are as follows.

http://www.dynamicdrive.com/dynamicindex14/image4.htm

and

http://www.dynamicdrive.com/dynamici...interslide.htm


I've tried e-mail the author of the first script to see if he would modify it to e able to perform the task I need it to. Unfortunately, The e-mail address he put in the script was incorrect. If anyone can help me I would greatly appreciate it.

[robertcathles]

Hello, my name is Robert, and I am pleased to meet you.

I am not an official member/admin of the Dymanic Drive forums, I am just another user, but I am able to help you nonetheless.

I remember creating a page like this before, for my school website.

I have cleaned up as much of this code for you as possible, seeing that I had originally created it for other purposes.

<input type="button" id="btnPrev" value="<< Previous" onclick="Prev();">
<input type="button" id="bntPlay" value="Play - Stop" onclick="Play()">
<input type="button" id="btnNext" value="  Next >>  " onclick="Next();">

<img id="_Ath_Slide" onload="OnImgLoad()" src="firstimage.gif">

<table id=imgObj style="FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00);">
<tr><td>
<SPAN id="_Ath_FileName"> </SPAN>
</td></tr>
</table>

<br><br>Number: <SPAN id="_Ath_Img_X"></SPAN>&nbsp;of&nbsp;<SPAN id="_Ath_Img_N"></SPAN>

<script language="JavaScript1.2">

/*
Interactive Image slideshow with text description
By Christian Carlessi Salvad&#243; (cocolinks@c.net.gt). Keep this notice intact.
Visit http://www.dynamicdrive.com for script
*/


g_fPlayMode = 0;
g_iimg = -1;
g_imax = 0;
g_ImageTable = new Array();

function ChangeImage(fFwd)
{
        imgObj.filters[0].apply();
if (fFwd)
{
if (++g_iimg==g_imax)
g_iimg=0;
}
else
{
if (g_iimg==0)
g_iimg=g_imax;
g_iimg--;
}
Update();
        imgObj.filters[0].play();
}

function getobject(obj){
if (document.getElementById)
return document.getElementById(obj)
else if (document.all)
return document.all[obj]
}

function Update(){
getobject("_Ath_Slide").src = g_ImageTable[g_iimg][0];
getobject("_Ath_FileName").innerHTML = g_ImageTable[g_iimg][1];
getobject("_Ath_Img_X").innerHTML = g_iimg + 1;
getobject("_Ath_Img_N").innerHTML = g_imax;
}


function Play()
{
g_fPlayMode = !g_fPlayMode;
if (g_fPlayMode)
{
getobject("btnPrev").disabled = getobject("btnNext").disabled = true;
Next();
}
else 
{
getobject("btnPrev").disabled = getobject("btnNext").disabled = false;

}
}
function OnImgLoad()
{
if (g_fPlayMode)
window.setTimeout("Tick()", g_dwTimeOutSec*3000);
}
function Tick() 
{
if (g_fPlayMode)
Next();
}
function Prev()
{
ChangeImage(false);
}
function Next()
{
ChangeImage(true);
}


////configure below variables/////////////////////////////

//configure the below images and description to your own. 
g_ImageTable[g_imax++] = new Array ("firstimage.gif", "text here");
g_ImageTable[g_imax++] = new Array ("secondimage.gif", "text here");
g_ImageTable[g_imax++] = new Array ("thirdimage.gif", "text here");
//extend the above list as desired
g_dwTimeOutSec=2

////End configuration/////////////////////////////

if (document.getElementById||document.all)
window.onload=Play

</script>

In this code, I have used a different version to the fading script. Instead, I have used the one from this page:

http://msdn.microsoft.com/workshop/s...o/DXTidemo.htm

In my original version, I actually wanted to remove the images, and just leave the text, but found this difficult, so I just replaced all the images with just one image location. As this happens to keep the same script structure, I was easily able to recover the image feature just for you

I have highlighted the stuff you need to change in red.

Please tell me how it goes!

[ryancarder21]

Hey Rob, I appreciate your reply. Again, I'm not to knowledged in Java. Should I place a certain portion of the script between the head tags or can in all go in the body? Also, I dont need the text portion of the script how would i remove that? Again, thanks for all your help.

Bryan

[robertcathles]

Again, I'm not to knowledged in Java.

Me neither!

Should I place a certain portion of the script between the head tags or can in all go in the body?

All of the code can go in the <body>. Although <script>'s should be in the <head>, it works fine in the <body> exactly where it is.

Also, I dont need the text portion of the script how would i remove that?

For the text portion, just remove wherever there is text you don't want, like "text here" and just replace it with a space " " or just ""

For example:

g_ImageTable[g_imax++] = new Array ("firstimage.gif", "");

Remember to copy that exact code apart from the variable in red for each image you want to add. The numbers will automatically add up.

Enjoy!

[ryancarder21]

Hey Rob, do you have an aim or yahoo name? I wanted to ask you a couple more questions about the code. Like if i could just use that one fading slide show script and just have like a drop down menu with all the different pictures in the menu so that you could just click the picture in the menu and jump to that picture, but still have the slideshow continue.. like you would select a picture in the menu it would jump to that picture then fade to the next one automatically.

[Twey]

I'm not to knowledged in Java.

Well, that's OK, because this is Javascript (or possibly even ECMAScript)

In this code, I have used a different version to the fading script. Instead, I have used the one from this page

Very bad idea. That page uses the IE-only filter: property, and won't display in other browsers.
In fact, even the page looks bad in other browsers.

[robertcathles]

Hey Rob, do you have an aim or yahoo name? I wanted to ask you a couple more questions about the code. Like if i could just use that one fading slide show script and just have like a drop down menu with all the different pictures in the menu so that you could just click the picture in the menu and jump to that picture, but still have the slideshow continue.. like you would select a picture in the menu it would jump to that picture then fade to the next one automatically.

I have an MSN Messenger name, but not aim (never even heard of it) or Yahoo!

I suppose by a drop-down list you mean text inside the drop-down list and not images, am I right? I have seen a drop-down list selection + image slideshow before: http://www.javascriptkit.com/script/...2/3slide.shtml

The buttons can be hidden if unwanted, it can be made to auto-play, and the transition script I have suggested can be applied.

[robertcathles]

In this code, I have used a different version to the fading script. Instead, I have used the one from this page. Very bad idea. That page uses the IE-only filter: property, and won't display in other browsers.
In fact, even the page looks bad in other browsers.

I'm only suggesting a script that already works well in the most popular browser. I would try to combine both scripts from Dynamic Drive as to suit your anti-Internet Explorer view but the one I have suggested was first at hand, and one that works.

However, thank you for pointing out that the fade only works for IE. Depending on who is going to view the code and in what browser, anyway.

[Twey]

your anti-Internet Explorer view

Nonsense. I wouldn't recommend code that only ran in any one browser, especially with a script like that that is difficult to downgrade gracefully.

one that works.

But it doesn't. That's the problem.

Depending on who is going to view the code and in what browser, anyway.

You should never assume that only one browser will view your pages. The script should work in as many browsers as possible, and have a usable -- if less pretty -- alternative for others.

[ryancarder21]

I like the 2/3 slideshow script you showed me.. that would work fine.. i just want the images to fade into each other instead of just changing to it. Is there a code i can put in place to make the images fade into each other?