PDA

View Full Version : Fading slideshow with menu



ryancarder21
02-17-2006, 06:11 PM
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/dynamicindex14/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
02-17-2006, 06:48 PM
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/samples/author/dhtml/DXTidemo/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
02-17-2006, 07:17 PM
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
02-17-2006, 07:27 PM
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
02-17-2006, 09:16 PM
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
02-17-2006, 09:22 PM
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 pageVery 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
02-17-2006, 09:35 PM
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/script2/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
02-17-2006, 09:40 PM
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
02-17-2006, 09:48 PM
your anti-Internet Explorer viewNonsense. 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
02-17-2006, 09:53 PM
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?

ryancarder21
02-17-2006, 09:57 PM
Oh.. by the way AIM is AOL Instant Messenger www.aim.com :)

robertcathles
02-17-2006, 10:11 PM
But it doesn't. That's the problem. :)
It does work! In IE 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.
Firstly, I can't be bothered to check my scripts in other browsers, I don't care, and everyone that does have the choice of IE against Any Other Browser and who chooses Any Other Browser is crazy anyway (in my opinion). Plus, most people don't even know that there are other browsers available. "What's the point in using Any Other Browser when IE is perfectly fine???"

I would cheekily say at this point, "see if you can do it then". I have only suggested this code because it is ready for use. Seeing that I don't know how to combine those two scripts suggested at first, all I could do was suggest the one I have.

robertcathles
02-17-2006, 10:15 PM
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?

I will try the script out when I get some time, but I have to go now. Unless someone else is able to sort the script for you then I am afraid you will have to wait a little while (in the next day or two). Sorry about that.

Can you please highlight if you would like the fade script to work with other browsers apart from just Internet Explorer, as Twey has pointed out.

Good luck!

robertcathles
02-17-2006, 10:16 PM
Oh.. by the way AIM is AOL Instant Messenger www.aim.com :)
Thank you very much for the information :)

Twey
02-17-2006, 11:32 PM
Firstly, I can't be bothered to check my scripts in other browsers, I don't care, and everyone that does have the choice of IE against Any Other Browser and who chooses Any Other Browser is crazy anyway (in my opinion).Ah - big, confident steps along the road of bad web design :)
OK - just for a moment, say I thought Browser X was the best browser ever, and created all my websites for it. Now, Browser X does things completely differently to any other browsers, and it only runs on a single OS on a single architecture. People who didn't use Browser X would just avoid my page, and laugh at my bad and incompatible web design. Now, imagine 80% of the Web was designed for Browser X. See what I'm getting at here? :)
I would cheekily say at this point, "see if you can do it then". Now how could I resist a challenge like that? :) Replace the body section of the blending script with:
<a href="javascript:gotoshow()"><img src="image1.gif" name="slide" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>

<script type="text/javascript">
var whichlink=0,
whichimage=-1,
playing = false,
blenddelay=(ie)? document.images['slide'].filters[0].duration*1000 : 0;

function slideit(back) {
if (!document.images) return;

// Movement
whichlink = whichimage;
if(back) whichimage -= 1;
else whichimage += 1;

// Error checking and boundaries
if(!imageholder[whichimage]) {
if(whichimage < 0) whichimage = slidelinks.length - 1;
else whichimage = 0;
}

// Display
if (ie) document.images['slide'].filters[0].apply();
document.images['slide'].src = imageholder[whichimage].src;
if (ie) document.images['slide'].filters[0].play();

// Animation
if(!playing) return;
setTimeout("slideit(true)", slidespeed+blenddelay);
}

function stopstart() {
playing = document.getElementById("prev").disabled = document.getElementById("next").disabled = !playing;
document.getElementById("stopstart").value = (playing ? "Stop" : "Start");
slideit(true);
}

slideit(false);


</script>
<input id="prev" type="button" onclick="slideit(true);" value="Previous" />
<input id="stopstart" type="button" onclick="stopstart();" value="Start" />
<input id="next" type="button" onclick="slideit(false);" value="Next" />

ryancarder21
02-18-2006, 06:30 AM
Well that was awesome, The code is exactly what I need except for one thing. I would like to have the drop down menu that was in that one slide show I listed.

Heres a link to what i have so far.. www.dr.rockstarmagic.com/test2.html what I need is for the slideshow to start automatically, then if the person likes they can stop it at a certain slide and restart it.. as well as move forward and backwards in slides, which is what it does now. I also need a drop down menu added on so that the can easily move to a specific slide. I managed to get a simple drop down menu in there, im just not sure how I would make it so when they click on a location it would bring them to that location and stop the slide show from going to the next slide at the same time. Again, everyone has been a huge help, thanks so much for all your time and effort.

Bryan

robertcathles
02-18-2006, 09:21 AM
OK - just for a moment, say I thought Browser X was the best browser ever, and created all my websites for it. Now, Browser X does things completely differently to any other browsers, and it only runs on a single OS on a single architecture. People who didn't use Browser X would just avoid my page, and laugh at my bad and incompatible web design. Now, imagine 80% of the Web was designed for Browser X. See what I'm getting at here? :)
Okay then, well if Browser X does all these things but only on one OS, why doesn't everyone use that single OS and browser? Wouldn't it make it so much easier? I suppose the simple, inevitable and unbeatable answer is 'choice'. I also think that you are suggesting that it is the web designer's duty to support any choice (well almost all of them anyway) that people can make, just so it works universally and at a minimum for the sake of it. Well what a wonderful world we live in, eh? ... Hence 'Down with Firefox!' - if instead, we all use one browser, and rid Firefox, then we wouldn't have to make our pages compatible with others then, would we?


Now how could I resist a challenge like that?
Very good script, well done. *claps regretfully* It does beat the one I provided in terms of usage, but the blending thing does not work for Firefox, but neither did mine!

robertcathles
02-18-2006, 09:27 AM
what I need is for the slideshow to start automatically, then if the person likes they can stop it at a certain slide and restart it ... I also need a drop down menu added on so that the can easily move to a specific slide. I managed to get a simple drop down menu in there, im just not sure how I would make it so when they click on a location it would bring them to that location and stop the slide show from going to the next slide at the same time.
Well I'm pretty much stuck for trying to solve that for you, as I know little about Javascript myself. I could try, but I know I wouldn't get anywhere, and apparently it wouldn't help if it only worked in one browser anyway. Sorry about that. Hopefully someone else will be able to help you out on this forum. Good luck and all the best! :)

Twey
02-18-2006, 01:25 PM
I would like to have the drop down menu that was in that one slide show I listed.Ah! - sorry, I didn't understand what you meant by "menu" - you mean the text underneath?
the blending thing does not work for Firefox, but neither did mine!Unfortunately not, as the way this script does the blend uses a filter property. However, the rest of the script will work on Firefox :)
I have a version ready:
Head:
<script type="text/javascript">

//*****************************************
// Blending Image Slide Show Script-
// &#169; Dynamic Drive (www.dynamicdrive.com)
// For full source code, visit http://www.dynamicdrive.com/
//*****************************************

// specify interval between slide (in milliseconds)
var slidespeed=3000

// specify images
var slideimages = new Array("http://www.dynamicdrive.com/dynamicindex4/bs00847a.gif","http://www.dynamicdrive.com/dynamicindex4/hh01478a.gif","http://www.dynamicdrive.com/dynamicindex4/bs00825a.gif");

// specify corresponding links
var slidelinks=new Array("http://www.dynamicdrive.com","http://javascriptkit.com","http://www.geocities.com");

// specify description for the image
var slidedescs = new Array("A clock", "A bulb", "Some dice");

var newwindow = 1; // open links in new window? 1=yes, 0=no
var autostart = 1; // autostart?

var imageholder = new Array();
var ie = document.all;
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function gotoshow(){
if (newwindow)
window.open(slidelinks[whichlink])
else
window.location=slidelinks[whichlink]
}

</script>Body:
<a href="javascript:gotoshow()"><img src="image1.gif" name="slide" border="0" style="filter:blendTrans(duration=3)" width="97" height="100"></a>
<br />
<input id="prev" type="button" onclick="slideit(true);" value="Previous" />
<input id="stopstart" type="button" onclick="stopstart();" value="Start" />
<input id="next" type="button" onclick="slideit(false);" value="Next" /><br />
<input type="button" onclick="whichimage=-1;slideit(false);" value="Restart" />
<p id="imageinfo"></p>

<script type="text/javascript">
var whichlink=0,
whichimage=-1,
playing = false,
blenddelay=(ie)? document.images['slide'].filters[0].duration*1000 : 0,
desc = document.getElementById("imageinfo"),
imgnum = 0,
thread;

desc.innerHTML = "Description: <span id=\"imagedesc\" style=\"font-weight:normal;\">" + slidedescs[0] + "</span><br />Picture <span id=\"imagenumber\">1</span> of " + slidelinks.length;
desc = document.getElementById("imagedesc");
imgnum = document.getElementById("imagenumber");

function slideit(back) {
if (!document.images) return;
clearTimeout(thread);

// Movement
whichlink = whichimage;
if(back) whichimage -= 1;
else whichimage += 1;

// Error checking and boundaries
if(!imageholder[whichimage]) {
if(whichimage < 0) whichimage = slidelinks.length - 1;
else whichimage = 0;
}

// Display
if (ie) document.images['slide'].filters[0].apply();
document.images['slide'].src = imageholder[whichimage].src;
if (ie) document.images['slide'].filters[0].play();
desc.innerHTML = slidedescs[whichimage];
imgnum.innerHTML = whichimage + 1;

// Animation
if(!playing) return;
thread = setTimeout("slideit(false)", slidespeed+blenddelay);
}

function stopstart() {
playing = document.getElementById("prev").disabled = document.getElementById("next").disabled = !playing;
document.getElementById("stopstart").value = (playing ? "Stop" : "Start");
if(playing) slideit(false);
else clearTimeout(thread);
}

slideit(false);
if(autostart) document.getElementById("stopstart").click();


</script>I'm working on a version that'll blend in other browsers, using opacity instead of filters. If you want it, watch this thread; if not, the above will do :)

Twey
02-18-2006, 06:01 PM
Here we go: this works in Firefox, IE and, theoretically, older versions of Mozilla or Netscape (though I don't have any to hand to test it with at the moment. It will work without the fading effect in Opera, Epiphany (gtkhtml engine) and probably most other browsers, although Konqueror seems to have problems with it that I can't figure out due to Konqueror's awful lack of Javascript debugging. :)
Head:

<style type="text/css">
#imageinfo {
font-weight: bold;
}
</style>
<script type="text/javascript">

//***********************************************************
// Blending Image Slide Show Script-
// &#169; Dynamic Drive (www.dynamicdrive.com)
// For full source code, visit http://www.dynamicdrive.com/
// Modified by Twey for compatibility, standards compliance,
// buttons, and stuff. That's "Twey." "Twey." With a "W." :-)
//***********************************************************

// specify interval between slide (in milliseconds)
var slidespeed=3000

// specify images
var slideimages = new Array("image1.gif","image2.gif","image3.gif");

// specify corresponding links
var slidelinks=new Array("http://www.dynamicdrive.com","http://javascriptkit.com","http://www.geocities.com");

// specify description for the image
var slidedescs = new Array("A clock", "A bulb", "Some dice");

var newwindow = 1; // open links in new window? 1=yes, 0=no
var autostart = 1; // autostart?

// Amount of blend with each pass, from 0 (invisible) to 1 (opaque). Lower = smoother, higher = faster. Warning: set it to 0 and it'll never get there :-)
var blendstep = 0.01;

// Passes per second.
var blendspeed = 100;

// Don't edit below here unless you know what you're doing. :-)

var imageholder = new Array();
for (i=0;i<slideimages.length;i++) {
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function gotoshow() {
if (newwindow)
window.open(slidelinks[whichlink]);
else
window.location = slidelinks[whichlink];
}

</script>Body:
<a href="javascript:gotoshow()"><img src="bs00847a.gif" id="slide" border="0" style="width:97;height:100;" /></a>
<img src="http://www.dynamicdrive.com/dynamicindex4/hh01478a.gif" id="nextImage" style="position:absolute;visibility:hidden;" />
<br />
<input id="prev" type="button" onclick="slideit(true);" value="Previous" />
<input id="stopstart" type="button" onclick="stopstart();" value="Start" />
<input id="next" type="button" onclick="slideit(false);" value="Next" /><br />
<input type="button" onclick="whichimage=-1;slideit(false);" value="Restart" />
<select id="selectimage"><option value="NONE">Choose an image...</option></select>
<p id="imageinfo"></p>

<script type="text/javascript">

blendspeed = 1000 / blendspeed;

var whichlink=0,
whichimage=-1,
playing = false,
blenddelay = blendspeed * 1 / blendstep,
desc = document.getElementById("imageinfo"),
imgnum = 0,
w3cOpacity = (typeof document.images[0].style.opacity != "undefined"),
mozOpacity = (typeof document.images[0].style.MozOpacity != "undefined"),
ieOpacity = (typeof document.images[0].filters != "undefined"),
slideThread = null, blendThread = null,
first = true;

if(w3cOpacity) {
document.images['slide'].style.opacity = "0.99";
document.images['nextImage'].style.opacity = "0.0";
} else if(mozOpacity) {
document.images['slide'].style.MozOpacity = "0.99";
document.images['nextImage'].style.MozOpacity = "0.0";
} else if(ieOpacity) {
document.images['slide'].style.filter = "progid:DXImageTransform.Microsoft.Fade(duration=" + blenddelay / 1000 + ")";
} else {
blenddelay = 0;
}

function midBlend(oldImage, newImage) {
if((w3cOpacity && parseFloat(newImage.style.opacity) > 0.95) || (mozOpacity && parseFloat(newImage.style.MozOpacity) > 0.95)) {
oldImage.src = newImage.src;
if(w3cOpacity) {
oldImage.style.opacity = "0.99";
newImage.style.opacity = "0.0";
} else if(mozOpacity) {
oldImage.style.MozOpacity = "0.99";
newImage.style.MozOpacity = "0.0";
}
blendThread = null;
return;
}

if(w3cOpacity) newImage.style.opacity = parseFloat(newImage.style.opacity) + blendstep;
else if(mozOpacity) newImage.style.MozOpacity = parseFloat(newImage.style.MozOpacity) + blendstep;

if(w3cOpacity) oldImage.style.opacity = parseFloat(oldImage.style.opacity) - blendstep;
else if(mozOpacity) oldImage.style.MozOpacity = parseFloat(oldImage.style.MozOpacity) - blendstep;

blendThread = setTimeout("midBlend(document.getElementById('" + oldImage.id + "'), document.getElementById('" + newImage.id + "'))", blendspeed);
}

function imageBlend(oldImage, newImage) {
if(!w3cOpacity && !mozOpacity && !ieOpacity) { oldImage.src = newImage.src; return; }
if(blendThread != null) return;
if(ieOpacity) {
oldImage.filters[0].apply();
oldImage.src=imageholder[whichimage].src;
oldImage.filters[0].play();
return;
}
newImage.style.width = oldImage.style.width;
newImage.style.height = oldImage.style.height;
newImage.style.top = oldImage.offsetTop + "px";
newImage.style.left = oldImage.offsetLeft + "px";
if(w3cOpacity) { newImage.style.opacity = "0.0"; oldImage.style.opacity = "0.99"; }
else if(mozOpacity) { newImage.style.MozOpacity = "0.0"; oldImage.style.MozOpacity = "0.99"; }
else if(ieOpacity) { oldImage.filters[0].apply(); oldImage.src = newImage.src; oldImage.filters[0].play(); }
newImage.style.zIndex = 1;
oldImage.style.zIndex = 0;
newImage.style.visibility = "visible";
if(!ieOpacity) midBlend(oldImage, newImage);
}

desc.innerHTML = "Description: <span id=\"imagedesc\" style=\"font-weight:normal;\">" + slidedescs[0] + "</span><br />Picture <span id=\"imagenumber\">1</span> of " + slidelinks.length;
desc = document.getElementById("imagedesc");
imgnum = document.getElementById("imagenumber");

function slideit(back) {
if (!document.images || blendThread != null) return;
clearTimeout(slideThread);

// Movement
whichlink = whichimage;
if(back) whichimage -= 1;
else whichimage += 1;

// Error checking and boundaries
if(!imageholder[whichimage]) {
if(whichimage < 0) whichimage = slidelinks.length - 1;
else whichimage = 0;
}

// Display
document.images['nextImage'].src = imageholder[whichimage].src;
if(!first) imageBlend(document.images['slide'], document.images['nextImage']);
else document.images['slide'].src = imageholder[whichimage].src;
desc.innerHTML = slidedescs[whichimage];
imgnum.innerHTML = whichimage + 1;

// Animation
if(!playing) return;
slideThread = setTimeout("slideit(false)", slidespeed+blenddelay);
}

function stopstart() {
playing = document.getElementById("prev").disabled = document.getElementById("next").disabled = !playing;
document.getElementById("stopstart").value = (playing ? "Stop" : "Start");
if(playing) slideit(false);
else clearTimeout(slideThread);
}

function popSel() {
selectel = document.getElementById("selectimage");
selectel.onchange = function() {
if(this.value != "NONE" && this.value != whichimage) {
if(blendThread != null) {
selectel.selectedIndex = 0;
return;
}
whichimage = parseInt(this.value) - 1;
slideit(false);
}
}

for(var fish=0;fish < imageholder.length;fish++) {
var blah = document.createElement('option');
blah.value = fish;
blah.innerHTML = slidedescs[fish];
selectel.appendChild(blah);
}
}

onload = function() {
slideit(false);
first = false;
if(autostart) document.getElementById("stopstart").click();
popSel();
}

</script>Sample page here (http://www.crystalinity.net/files/slide.html) (sorry DD, I borrowed your images :)).

jscheuer1
02-18-2006, 06:40 PM
I ran this in NS8 FF mode and it was jumpy, flashing actually. I've recently upgraded to FF1.5 and it looks OK in that (fine in IE6 as well, good job there, Twey with a w). FF used to have a bug with opacity and moz-opacity. If you were shifting on a progressing gradient up to 1, it would flash upon arrival at full opacity (1). Apparently this is fixed in the newer version but, as NS8 and presumably any older FF agents out there still have this bug (NS7 would be included, perhaps Safari), it might be a good idea to continue to use the time honored work around for this bug and stop short at 0.99 opacity. It looks just like 1.0 opacity to the naked eye but, doesn't flash or jump.

Twey
02-18-2006, 06:55 PM
Right. Done.
good job there, Twey with a wI ended up as "Trey" in the credit for the last script I wrote :p
I also modified it to count anything over 0.95 as opaque, rather than requiring precisely 1. I just know somebody will try to use steps of 0.03. :p

/EDIT: I just noticed the strangest thing on the demo page... my FTP client has corrupted the "c" in "dice" into a non-printing ASCII SOH character :-\ What's stranger, it keeps doing it... I've tried ASCII and binary mode, but it keeps happening! Anyway, the "c" should be there. Try to visualize it.

/FURTHER EDIT: Sorry, Robert, just saw the rest of your reply:
Okay then, well if Browser X does all these things but only on one OS, why doesn't everyone use that single OS and browser?Don't know about Browser X, but I can think of a good few reasons for IE:
Money - I can buy a whole new computer for the cost of Windows.
Dislike of the company that made it and their business tactics (of which IE is a large part -- your viewpoint is exactly what Microsoft intend people to think like) - there are a lot of people out there, myself included, who don't trust Microsoft after some of the things they're tried -- and managed -- to foist off on the general population over the years.
Wariness of signing a contract saying that you don't actually own your copy of an OS, and that you've just sort of "rented" it from the company you paid money to.
Mistrust of software whose source code is jealously guarded - it's virtually impossible to know what Windows (and IE) is actually doing behind its users' backs.
Technical superiority (http://www.dynamicdrive.com/forums/showthread.php?t=5193)
Hey, maybe they just want to not have to keep looking over their shoulders for viruses for once.

/FURTHER FURTHER EDIT: D'oh... just realized what the OP meant by the dropdown menu. Added in.

jscheuer1
02-19-2006, 08:24 AM
Your code for populating the select seems to only work in FF1.5 here. In NS8 FF mode, Opera8, and IE6 it fails in various ways. Here is a substitute that works in those as well as FF1.5:

First add to your onload function:


onload = function() {
slideit(false);
first = false;
if(autostart) document.getElementById("stopstart").click();
popSel();
}

Then use this popSel() function:


function popSel(){
for(var fish=0;fish < imageholder.length;fish++) {
var blah=document.createElement('option')
blah.value=fish
blah.innerHTML=slidedescs[fish]
selectel.appendChild(blah)
}
}

This requires no change to the markup.

BTW, great job on the fading issue, works in all applicable browsers here now.

Twey
02-19-2006, 11:01 AM
Your code for populating the select seems to only work in FF1.5 here.Whoops - need to start testing those tweaks more >.< I applied your fix, with a couple of changes (selectel is much prettier when it's a local variable :)).
BTW, great job on the fading issue, works in all applicable browsers here now.Why thank you. Unfortunately Konqueror still not only doesn't display it, but causes the page to run incredibly slowly. There must be some sort of Javascript-debugging extension to Konqueror out there somewhere.

vneexceeded
02-20-2006, 06:12 AM
i am looking for a way to do something similar to what you have demonstraited here. I have 6 pics (jpg) that i want to automatically fade from one to the other and repeat. very similar to what you have done. but i dont need any buttons or anything but the pics fading from one to the other. is there a way to edit what you have done here to make it work for me. i liked the work you all have been tweaking to get it to run on as many pages as possible and would like to use a similar idea if possible. can anyone help me out? I know next to nothing of java and html. I will give credit on the page im building for any help in this.

Adam

vneexceeded
02-20-2006, 08:54 AM
to clarify what i want to do, here is my opening webpage

www.soapstone.95mb.com

i want to have 6 images that fade from one to the other automatically without prompting fomr the user in the inside of the circle of text (background image)in a endless loop. I also want this slide show to be the link that gets you into the main website. click the pic and yur in. can someone help with this?

Thanks
Adam

jscheuer1
02-20-2006, 10:22 AM
vneexceeded,

Have you looked at:

Ultimate Fade-in slideshow (v1.5) (http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm)

Twey
02-20-2006, 04:59 PM
You can quite easily hide the buttons, menus, et al by wrapping them in a non-displaying div:
<div style="display:none;">
<!-- ...unwanted HTML goes here... -->
</div>This will stop them displaying without mucking up the script -- although it also makes a large portion of this code pointless :)

vneexceeded
02-21-2006, 03:07 AM
Thanks ALot! I just stumbled onto the site and this tread looking for answers to this question and John you pointed me in the right direction. Couldn't see the forest through the trees... thanks for guiding me to the obvious
:) duno how i missed that one

knravikiran
02-21-2006, 01:00 PM
I have One Query ..i used the code given in Ultimate Fade-in slideshow (v1.5) of dynamic drive website.


Have you looked at:

Ultimate Fade-in slideshow (v1.5) (http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm)

But i wanted to put thumbnails to that slideshow..and when clicked..it should popup with enlarged pic. Can it be done??

vneexceeded
02-22-2006, 06:42 AM
ok got a question. how can i take the ultimate fade in slide show v1.5 and postision it in a certain spot on my webpage? I can't seem to space it over. I can move it down or up but not sideways. is there a way to position it at a x,y location on the page?

VNEexceeded

jscheuer1
02-22-2006, 07:18 AM
Generally, you don't want to use absolute positioning which is what an x,y position on the page would be. The script behaves, in almost all circumstances as a block level element. That is like a paragraph or a division. So, putting it in a table or in a division, it will behave just like a block level element. To get it to move horizontally in a table, put it in a different cell or pad the cell it is in. To get it to move horizontally in a division, give the division a width just a bit wider than the slideshow, apply float, padding and/or margins to the division.

Bornfree
11-09-2006, 08:16 PM
Hi guys, This place is so cool. I always get what i need from here.
Anyway I tried to used the script that Twey gave. it does work in IE fine but with FF 2.0 i get these images outside my page! can someone help me with is. It does work but i get two images on one page (one in the top Left corner and the other is where i want it

Bornfree
11-09-2006, 09:14 PM
Thanks anyway guys for the great script. I managed to get it working!