Fade-in image slideshow script

**gingerDELUCA** · 05-13-2005, 06:13 AM

Hi,

http://www.dynamicdrive.com/dynamicindex14/fadeinslide

I'm using the Fade-in image slideshow and it's working great! Many thanks to the creators!!!

However, without meaning to butcher the script I'd like to get rid off the fade-in. I had no clue how it looked when I worked it into my html as my browser doesn't support the fade-in. I've just seen it and it's marvelous but doesn't quite suit my purpose.

Is there any way to stop the fade-in or is there a similar auto-rotating slideshow script that's as easy to use and offers link and link target ability for individual images.

Thanks for your help

Happy spring, gin

**jscheuer1** · 05-13-2005, 08:19 AM

Yup,

Remove these three sections from the code:

Code:

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div  id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
else

Code:

if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
tempobj.style.visibility="visible"
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else

Code:

if (ie4||dom)
window.onload=startit
else

**gingerDELUCA** · 05-13-2005, 04:59 PM

Thanks John the fade-in disappeared!

Unfortunately when checking for the fade-in I realized that the links of the pictures don't function in all the browsers.

With the fade-in it works in Netscape and Safari but not in IE.
Without the fade-in it doesn't work in Safari, Netscape and IE.

I have no clue what's up with that. I probably messed up the code

. Here's my slideshow testing page http://www.cafepress.com/schnickschnack/610911 and the script http://www.schnickschnack.biz/s/jersey.js.

*gin

**jscheuer1** · 05-13-2005, 06:15 PM

No, my mistake. I completely forgot about the links. I was only thinking of converting it to a simple non-fading slideshow. Sorry about that. I hope you backed up your file before altering it. In any case, simply start over or reverse the steps I told you to take in my previous post. Once you have that done, in the script find these lines:

Code:

if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/101

Change them to:

Code:

if (tempobj.filters)
tempobj.filters.alpha.opacity=100
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=0.99

That's it, much simpler than my first answer. Again, apologies for the mix-up on my end!

**gingerDELUCA** · 05-13-2005, 08:01 PM

Yep, that did the trick. THANKS for helping me out!!!

*gin

**gingerDELUCA** · 05-13-2005, 08:24 PM

OK. I do have another question.

I cannot access the <head> and just inserted this in the <body>:

<script type='text/javascript'> /***********************************************
* Fade-in image slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/ </script><script language="JavaScript1.2" type="text/javascript" src="http://www.schnickschnack.biz/s/jersey.js"></script>

It's working here. However, this seems not right. Am I better off including the entire script in the html to make sure it's working on most systems/browsers?

*gin

**jscheuer1** · 05-13-2005, 09:30 PM

No, having it as an external file makes no difference to compatibility with other browsers that I know of. Perhaps some really old browsers will not do external .js files but then, they won't do most, if not all of the regular content on your page either. One thing you can do is combine your on page script link with the credit, like so:

Code:

<script src="http://www.schnickschnack.biz/s/jersey.js" type="text/javascript"> 
/***********************************************
* Fade-in image slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

One other thing, this script does not pause. I've tried to come up with a mod to pause it (just something I've been working on) but, it is unwieldy in its current form and not activated by mouse over. So, I'd suggest changing:

Mouse over to pause.
Click to view item!

to just:

Click to view item!

**gingerDELUCA** · 05-13-2005, 10:02 PM

John,

thanks for all the good advice

. I had just noticed too a few minutes ago that it didn't pause on mouse over and already removed that note. I'm pretty sure though it did pause when I tried it out last night. Who knows maybe that was wishful thinking. Anyhow I'll cut the code like you said. I had it like that in another version mmmh.

So you think everything is okay with those two changes and the fact that there's no <script> stuff in the <head> of the html won't mess things up?

*gin

PS: Please post when you figure out how to add pause on mouseover to the script - that be a neat addition!

**jscheuer1** · 05-14-2005, 04:19 AM

Originally Posted by gingerDELUCA

. . . the fact that there's no <script> stuff in the <head> of the html won't mess things up?

If you will pardon the poor attempt at a pun, where did you get the idea that something needed to be in the head, into your head? Anyways, as far as the Dynamic Drive Fade-in slideshow script we are talking about goes, there is nothing in the instructions for that script that says to put anything in the head of your document. So, you are safe there, that script belongs in the body where you want it to appear:

Originally Posted by DD instructions for Fade-in slideshow

Simply add the following script to the BODY section of your page

Linking its source to the body is just as good.

Now, in general, even if a script says it goes in the head, which this one does not, you usually can put it in the body as long as it is before any content in the body that it needs to effect before said content is parsed by the browser. Oddly enough, the situation is usually the reverse. A script may go in the head but only become active 'onload'. That means it generally could have gone at the bottom of the body section.

To repeat, the Fade-in slideshow script belongs in the body so, no don't worry your head about it. Oops, I did it again.

P.S. I'll post that mod for the pause here if/when I work it out. I have it working but, the code needs to be trimmed down and, in this case, activated on mouse over.

**gingerDELUCA** · 05-14-2005, 05:33 AM

Just wanted to be on the safe side

I don't really know anything about scripts and got a little worried when I read Shayta's post "Fade-In Image Slideshow help" yesterday:

Originally Posted by shayta

The code that's given on the Dynamic Drive web site is to be inserted directly into the body of the main html file it's to be run from. I'm trying to keep my html file small, so I've got a separate .js file where I store all my Javascript functions...

Well, I thought that's kinda what I'm doing (separate .js file) and here is part of how Shayta fixed it:

Originally Posted by jscheuer1

If it isn't there already (as you haven't made that clear) this goes in the head of the page you want the slide show on:

Code:

<script language="Javascript" src="javascript.js"></script>

So that got me thinking... But then again I'm a newbie and things can seem very mysterious. And things that seem to be similar might be not...
Anyhow, once again BiG THANKS for your help!!! I'm glad all the <script> stuff is now OK on my site. I just love to do things right.

*gin

Thread: Fade-in image slideshow script

Thread Tools

Search Thread

Fade-in image slideshow script

Bookmarks

Bookmarks

Posting Permissions