PDA

View Full Version : 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:

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

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

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 :confused:. 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:

if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/101Change them to:

if (tempobj.filters)
tempobj.filters.alpha.opacity=100
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=0.99That'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:

<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
. . . 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:


Simply add the following script to the BODY section of your pageLinking 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:


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:


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:


<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

jscheuer1
05-14-2005, 07:55 AM
I get it now, let me see if I can explain. In shayta's case all the code for all the javascripts used on the site is in one external file that was linked in the head of each document (something I would recommend against for several reasons). The problem then became - what portion of the slideshow could safely be read from the head and what portion still needed to be in the body (where it originally belongs). In your case you are doing what I would recommend when using external scripts, that is having a separate external file for each script. With that setup, all you need to do with each one is link it to the appropriate spot within the page(s) it is to be used on. In the case of this slideshow, that is the body, particularly that point in the body where you want the slideshow to appear. So, as I said, you are good.

Update on pause. I dusted off my previous effort at adding a pause to this script. I got it to work with mouseOver/mouseOut but, the original reason I had shelved this project came back to me as I put it through its paces. Under normal circumstances, it works well enough except for a little skipping sometimes on resume depending upon just where in the 'show' cycle the script was when paused. What I found totally unacceptable was that if repeated rapid start/stop/start/stop commands are issued (as would be easy to do, just waving the mouse around inadvertently) it goes haywire causing an overload of some kind that causes the browser to stop responding. I could not pin this down before and still am at a loss. The script is more complicated than need be what with the capability of cross browser fade, which we only disabled the effect on, not the underlying routines (restoring them is what brought the links back). Would you consider a different script?

gingerDELUCA
05-14-2005, 05:52 PM
Good explanation. Thanx.

I don't mind using a different script. I searched around a bit before deciding to use this one but couldn't find a lot of slide show scripts with link ability.
Well, as nice as the stop on mouse over would be don't stress out about it! Things are working right now (even though there are a lot of disabled effects running).

In general I think the world could do with a free and easy to use new script without the fade-in but the links and pause! And I'd switch over as soon as it would prove to work well! If there is a script like that already please point it out.

*gin

jscheuer1
05-14-2005, 10:18 PM
I just wrote one. I've got a question for you though, your paths for your images all have 'nocache' as a directory in their pathnames. Why is that? Could the paths be different, without the 'nocache' directory? I ask because slideshows work best when they can preload images and draw on the cached images when displaying the images. This 'nocache' directory seems to prevent that. I just took it out of the pathnames and all seems fine. So, here is the new script, lucky you, it is configured to run with your images as, that's how I tested it:


<html>
<head>
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<title>John's Slide Show - Demo (Jerseys)</title>
</head>
<body>
<script type="text/javascript">
if (document.images) {
////////////////////////////////////////
//Simple Slide Show w/links, titles,
//MouseOver pause & optional captions.
//Copyright John Davenport Scheuer
//email: jscheuer1@comcast.net
//Permission to use Granted.
//This credit must stay intact.
////////////////////////////////////////

//Set Captions, true or false
var captions=true
//Set Descriptive Name for Slide Show
var desc='Baseball Jerseys:'
//Set width & height of Slides
//All must be the same dimensions
var width=240, height=240
//Set Pause Between Slides in Seconds
var pause=3
//Set optional Target for links,
//use empty quotes "" for same page
linkTarget=""
//Set Images, Links and Titles
var iSlides = new Array();
iSlides[0]=["picture1.jpg", "http://www.some.com/pages/somepage.htm", "Mom\'s cake rules! #2"]
iSlides[1]=["picture2.jpg", "http://www.some.com/pages/somepage.htm", "I love mom"]
iSlides[2]=["picture3.jpg", "http://www.some.com/pages/somepage.htm", "Mom\'s cake rules! #1"]
iSlides[3]=["picture4.jpg", "http://www.some.com/pages/somepage.htm", "Marry me! Wedding Proposal"]
iSlides[4]=["picture5.jpg", "http://www.some.com/pages/somepage.htm", "Cool Electronic Circuit"]
iSlides[5]=["picture6.jpg", "http://www.some.com/pages/somepage.htm", "Iluvu. (I love you.)"]
iSlides[6]=["picture7.jpg", "http://www.some.com/pages/somepage.htm", "\"...on the 4th\" (of July)"]
iSlides[7]=["picture8.jpg", "http://www.some.com/pages/somepage.htm", "Happy Bday America!"]
iSlides[8]=["picture9.jpg", "http://www.some.com/pages/somepage.htm", "Graduation Class of 2005"]
//////////////No need to Edit Below/////////////
var iTarget, iLink, iText, dFlag, doTime, goTime

i=0;
x=('img'+i)
x = new Image();
x.src = iSlides[i][0];
document.write('<table border="0" cellpadding="0" cellspacing="0"><tr><td>')
document.write('<a onMouseOver="dFlag=\'stop\'" onMouseOut="doslide()" href="'+iSlides[0][1]+'" target="'+linkTarget+'">')
document.write('<img width="'+width+'" height="'+height+'" name="imgarea" src="'+x.src+'" title="'+iSlides[0][2]+'" alt="'+desc+'" border=0></a>')
if (document.all||document.getElementById){
if (captions)
document.write('<p id="cap" width="'+width+'" style="text-align:center">'+desc+'<br>'+iSlides[0][2]+'</p>')
}
document.write('</td></tr></table>')
for (p = 0; p < document.images.length; p++){
if (document.images[p].name=='imgarea'){
iTarget=document.images[p]
iLink=(document.images[p].parentNode)? document.images[p].parentNode :document.images[p].parentElement
iText=(document.getElementById&&!document.all)? document.getElementById('cap') : document.all.cap
break
}
}

function goagain(){
if (i<=0) i=0;
if (i>=iSlides.length) i=0;

x=('img'+i)
x = new Image();
x.src = iSlides[i][0];
var goTime=setTimeout("doslide()",pause*1000);}

function doslide(){
if (dFlag=='stop'){
clearTimeout(goTime)
clearTimeout(doTime)
dFlag=''
return;
}
var goim=true
if (x.complete==false)
goim=false
if (goim!==false){
iTarget.src = x.src;
iTarget.title = iSlides[i][2]
iLink.href = iSlides[i][1]
if (iText){
if (iText!=='undefined')
iText.innerHTML = desc+'<br>'+iSlides[i][2]
}
i+=1;

goagain();}
else
var doTime=setTimeout("doslide()",2000);
}
doslide()
}
</script>
</body>
</html>If you use the optional captions, you can configure their appearance using a style section inserted before the script, like:

<style type="text/css">
#cap {
font-family:arial;
font-size:.95em;
color:red;
}
</style>Let me know if it works out for you and if you have any questions.

gingerDELUCA
05-14-2005, 10:36 PM
I have no clue about the cache thing. I used those pix because I was kinda lazy. Cafepress does the fullfillment for my store and they provide the images for me to use. I really should pull them down from cafepress and store them on my own site. That would make things easier with the scripts too.

Anyhow, I strongly recommend switching the sample photos in the posted script as they are not mine!!! I'm not sure cafepress would like you to use them! Sorry to let you know so late. I had no clue you are already working on a new script!!! Wow! You are one speedy script writer!

I'll check it out in a second. I suggest you start a new thread on this board though so other people can find and test your new script too!

*gin

gingerDELUCA
05-14-2005, 10:47 PM
John,

I've tried the script but nothing happens. Did anything still need configurating:confused:? I check in Safari, IE and Netscape on OS X.
Maybe it has to do with the source of the images?

*gin

jscheuer1
05-15-2005, 01:48 AM
Hmm, still working fine here however, I was not aware that you were using a mac. That could be it. Oh well, back to the drawing board. Actually, I think it would be a relative easy fix to make it mac friendly, I just have no mac to test on. What version of netscape for mac are you using? I am surprised it doesn't work in IE for mac as it works on IE4+ for the PC as well as NS7.2 and FF. I'll take those links out, as you suggest.

jscheuer1
05-15-2005, 02:32 AM
Now, NS4 for PC didn't work with this but, it doesn't work with the linked pages either. I imagine NS4 for mac would similarly be handicapped. I've upgraded the script to work, i think, on the other mac browsers you mentioned, no real way for me to tell. Take out this part of the code:
document.write('<table border="0" cellpadding="0" cellspacing="0"><tr><td>')
document.write('<a onMouseOver="dFlag=\'stop\'" onMouseOut="doslide()" href="'+iSlides[0][1]+'" target="'+linkTarget+'">')
document.write('<img width="'+width+'" height="'+height+'" name="imgarea" src="'+x.src+'" title="'+iSlides[0][2]+'" alt="'+desc+'" border=0></a>')
if (document.all||document.getElementById){
if (captions)
document.write('<p id="cap" width="'+width+'" style="text-align:center">'+desc+'<br>'+iSlides[0][2]+'</p>')
}
document.write('</td></tr></table>')
for (p = 0; p < document.images.length; p++){
if (document.images[p].name=='imgarea'){
iTarget=document.images[p]
iLink=(document.images[p].parentNode)? document.images[p].parentNode :document.images[p].parentElement
iText=(document.getElementById&&!document.all)? document.getElementById('cap') : document.all.cap
break
}
}and replace it with this section:
document.write('<table border="0" cellpadding="0" cellspacing="0"><tr><td>')
document.write('<a id="lnk" onMouseOver="dFlag=\'stop\'" onMouseOut="doslide()" href="'+iSlides[0][1]+'" target="'+linkTarget+'">')
document.write('<img width="'+width+'" height="'+height+'" id="imgarea" src="'+x.src+'" title="'+iSlides[0][2]+'" alt="'+desc+'" border=0></a>')
if (document.all||document.getElementById){
if (captions)
document.write('<p id="cap" width="'+width+'" style="text-align:center">'+desc+'<br>'+iSlides[0][2]+'</p>')
}
document.write('</td></tr></table>')
var dom=document.getElementById&&!document.all
iTarget=(dom)? document.getElementById('imgarea') : document.all.imgarea
iLink=(dom)? document.getElementById('lnk') : document.all.lnk
iText=(dom)? document.getElementById('cap') : document.all.capThe only other thing I can think of offhand that might be giving mac browsers a problem is this (at the very beginning):
if (document.images) {If you take that out (I wouldn't if it is not the problem as, it adds compatibility for non-graphics oriented user agents) you also need to remove the final:
}One last thought, when you tried my demo, did you first try it exactly as written, as a demo page? If not, if you went right to an external script, you might have missed some code, particularly the code above the credit, that would break the entire script.

gingerDELUCA
05-15-2005, 03:12 AM
Got to make it work on a mac ;) !!! I love my mac and honestly quite a few people coming to my site use mac or linux.

Here are the browsers I tested your script on (all on OS X 10.3):
Netscape 7.1
Safari 1.3
IE 5.2

Feel free to use me as "mac tester" for scripts.

By the way I have a table problem within the page you helped me fix the script in. I've been trying to find the bug but it drives me crazy. There's a gap between two of the images in Netscape. It works in Safari and IE. http://www.cafepress.com/schnickschnack/610911

Here's the html for the "buggy" table:

<table width="535" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="http://www.cafepress.com/cp/info/img/spacer.gif" width="353" height="11" border="0" alt="" /></td>
<td><img src="http://www.cafepress.com/cp/info/img/spacer.gif" width="32" height="11" border="0" alt="" /></td>
<td><img src="http://www.cafepress.com/cp/info/img/spacer.gif" width="150" height="11" border="0" alt="" /></td>
</tr>
<tr>
<td><!-- Golden Frame -->
<table width="353" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="http://www.schnickschnack.biz/gold/free_01.png" width="56" height="82" border="0" alt=""></td>
<td><img src="http://www.schnickschnack.biz/gold/free_02.png" width="240" height="82" border="0" alt=""></td>
<td><img src="http://www.schnickschnack.biz/gold/free_03.png" width="57" height="82" border="0" alt=""></td>
</tr>
<tr>
<td><img src="http://www.schnickschnack.biz/gold/free_04.png" width="56" height="240" border="0" alt=""></td>
<td><script type="text/javascript" src="http://www.schnickschnack.biz/s/jersey.js" language="JavaScript1.2">
/***********************************************
* 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><noscript>Sorry! Your browser does not support JavaScript.</noscript></td>
<td><img src="http://www.schnickschnack.biz/gold/free_06.png" width="57" height="240" border="0" alt=""></td>
</tr>
<tr>
<td><img src="http://www.schnickschnack.biz/gold/free_07.png" width="56" height="127" border="0" alt=""></td>
<td><img src="http://www.schnickschnack.biz/gold/free_08jersey.png" width="240" height="127" border="0" alt=""></td>
<td><img src="http://www.schnickschnack.biz/gold/free_09.png" width="57" height="127" border="0" alt=""></td>
</tr>
</table>
<!-- Golden Frame End --></td>
<td><img src="http://www.cafepress.com/cp/info/img/spacer.gif" width="32" height="1" border="0" alt="" /></td>
<td><!-- Tips --><table width="150" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><center><div class="storesmallprint"><a href="/schnickschnack.21835064"><img border="0" height="150" width="150" alt="Happy Bday America! * Baseball Jersey" src="http://www.schnickschnack.biz/pick/jersey1.jpg"></a><br><br><a href="/schnickschnack.21835064">Happy Bday America! * Baseball Jersey</a><br>$22.99</div></center></td>
</tr>
<tr>
<td><img src="http://www.cafepress.com/cp/info/img/spacer.gif" width="1" height="7" border="0" alt="" /></td>
</tr>
<tr>
<td><center><div class="storesmallprint"><a href="/schnickschnack.22052077"><img border="0" height="150" width="150" alt="Graduation Class of 2005 * Baseball Jersey" src="http://www.schnickschnack.biz/pick/jersey2.jpg"></a><br><br><a href="/schnickschnack.22052077">Graduation Class of 2005 * Baseball Jersey</a><br>$22.99</div></center></td>
</tr>
</table><!-- End Tips --></td>
</tr>
<tr>
<td class="storesmallprint" colspan="3"><img src="http://www.cafepress.com/cp/info/img/spacer.gif" width="1" height="10" border="0" alt="" /><br><b>Baseball Jerseys</b><br><img src="http://www.cafepress.com/cp/info/img/spacer.gif" height=5 width=1 border=0 alt="" /><br>Our 100% cotton Baseball Jerseys are a sporty hit with both men and women whether you're in the game or just looking the part in great run-around casual-wear. Choose red, blue or black sleeves.<br><img src="http://www.cafepress.com/cp/info/img/spacer.gif" height=5 width=1 border=0 alt="" /><br><b><a href="http://www.cafepress.com/schnickschnack?s=schnickschnack&type=38">View all Baseball Jerseys!</a></b></td>
</tr>
</table>

Any ideas? How does it look on your screen?

*gin

PS: Thanks for erasing those pix!

gingerDELUCA
05-15-2005, 03:24 AM
OOPs, I was still replying to your previous post. OK. So when I tried the script I copied everything that was there and ran the whole html.

By the way don't stress out about the script because of my little use. However, if you are into creating a new script to make the world a better place - that's great!!! As I mentioned earlier you might want to start a new thread about the new script to get more people involved! I bet there's more folks just waiting for the kind of script you are working on!!!

If you'd like me to run another test for a version just post the entire html and I'll copy and paste and test it again.

*gin

jscheuer1
05-15-2005, 04:16 AM
OK, this is getting a little confusing so, a little background. This script I posted came out of a script I wrote for a client whose sites I master. That script was much simpler and specific to its task. I had been thinking for some time of turning it into the sort of script others can use. This just gave me that opportunity. If things work out with it, rather than just start a new thread, I probably will also submit it to Dynamic Drive. Now, having a mac tester is a wonderful thing so, I accept. It can be maddening to get feedback that one cannot see but, it is worth it for something like this that has a real chance at portability. Dynamic Drive could use a mac tester though, ddadmin keeps saying he is going to get a mac. Anyways, in my previous post is what I believe may be the fix for mac. If that's too much editing for you I can post a full version. Come to think of it, I may well just put up a demo on the web, more on that later.

As to your table/image gap issue, it looks fine in IE6 and NS7.2 on pc so, I'm not sure. If you tell me which two images you are talking about I might be able to figure it out. If it is the vertical spacing between the two jerseys, this and/or its row/cell might be the source of the trouble:

<img src="http://www.cafepress.com/cp/info/img/spacer.gif" width="1" height="7" border="0" alt="" />

I would want to confirm the images involved before I proposed a solution.

jscheuer1
05-15-2005, 04:31 AM
gin, how's this look?

http://home.comcast.net/~jscheuer1/side/files/johnslidedemo2.htm

gingerDELUCA
05-15-2005, 05:16 AM
Pix of the bug: http://schnickschnack.biz/bug.png
So the page looks fine on your system? No gap? Weird things happen online!

Thanks for putting up a demo!!! That makes testing a whole lot easier. Give me a second to test all 3 browsers.

*gin

gingerDELUCA
05-15-2005, 05:35 AM
John,

two thumbs way up!!! I've checked all 3 browsers: rotating of photos, pausing on mouse over, playing on mouse out, title changes and links - all work!!! Was there anything else you wanted me to look out for?

By the way I love the titles! I was originaly looking for a script with titles but couldn't find anything with link abitlity which is a must have for me. Also, is there an easy way for you to make the titles be links too - the same as the picture? It's just that some people seem to not get that clicking on a picture thing but they like old fashioned links.

Also thumbs up for new thread plus submission to Dynamic Drive! I think it would be a great addition!!!

*gin

gingerDELUCA
05-15-2005, 05:53 AM
Thumbs up for Firefox 1.0.4 too! I just saw it. Isn't that kind of the same as Netscape though with both browsers using mozilla 5.0? I'm not technical enough to know all that stuff.

Well, my bug at least is in firefox too!

*gin

jscheuer1
05-15-2005, 07:58 AM
There are subtle differences between NS7.2 and all the FF versions to date. Most things are the same. An example is your gap, it is in FF, silly of me not to check, looked fine in IE6 and NS7.2. Not sure what the trouble is exactly but here is a kludge fix that didn't ruin it in the other two browsers that already looked good:
<td><img src="http://www.schnickschnack.biz/gold/free_07.png" width="56" height="128" border="0" style="position:relative;top:-1px!important;top:0;" alt=""></td>Note: I increased this image's height by 1 and shifted its position up 1px.

Now, linking the titles, to do that right, I'll want a little bit of time.

Added later, I've just added the !important hack for IE as, it appears to need it, hopefully this will not mess things up in other browsers I cannot see. If it does, a style section declaration with the * html hack may be needed. To remove the !important hack, take this out:

!important;top:0

jscheuer1
05-15-2005, 05:27 PM
OK, I've updated the demo. It now includes links in the captions. I also added a configuration item to set caption width, to prevent wrapping of long captions.

gingerDELUCA
05-15-2005, 06:34 PM
John,

same url for the demo as the last time?

*gin

jscheuer1
05-15-2005, 07:05 PM
Yup, and I just updated it again with the optional style I had mentioned for the captions. How does the fix for your frame (picture frame) work in those browsers I can't see?

gingerDELUCA
05-15-2005, 08:21 PM
I haven't worked on the bug yet. I validated the entire html at http://validator.w3.org and found tons of errors in the template the table sits in - mainly in parts I don't have access to. So I've been busy trying to contact the web host and maker of the template to ask what's up with that.

OK. So before getting to the bug I'll run a test on your new script version. Just a sec.

*gin

gingerDELUCA
05-15-2005, 08:50 PM
Here are the test results:

Firefox & Netscape::::Okay! The title links are sweet!!!
Safari:::Weird Jumping Dot. See here: http://schnickschnack.biz/test.png
IE:::Mmhhh, the last picture is still the one with the 4 drawn into & the slide show doesn't start again when I go back to it from one of the links using the back button. It's stuck and needs to be reloaded. I don't know if that matters but it work well in all the other browsers.

*gin

gingerDELUCA
05-15-2005, 09:42 PM
Hey the "kludge fix" is working marvelous on my end. Jipppeh!!! :D Thanx!!! http://www.cafepress.com/schnickschnack/610911
I figure it's all good on PC too, right? Is it pretty safe to use that for a patch without causing more trouble?

*gin

jscheuer1
05-15-2005, 10:28 PM
On Demo,

IE for mac, try clearing the cache. It worked OK before, right? I took that horrible looking #4 off the server so, IE mac must be serving up bits of cached material mixed with the new script, almost has to be ugly. Jumping dot? I'll have to think about that one, no clue what is causing it. The fact that it moves probably means it is not from any one thing, more like a recurring artifact from the relative positioning.

On the Kludge,

It's a good kludge on my end for FF1.0.4 (only modern browser I have that showed the gap) harmless for NS7.2 and IE6. It is such a minor thing, the kludge, that as long as it causes no observable problems, it is safe to use. About the code not validating. I don't worry about that and the web host probably doesn't either. I've seen plenty of valid code look horrible. I go with, if it works great! The whole validation movement seems to be an attempt to get all the various browsers to treat one method of coding the same. A worthy goal but, we are nowhere near that yet. There are others who will disagree with my outlook on this and they are entitled to their opinions. That said, the day is coming, when I do not know, when valid code will be the rule rather than the exception. So, I do try to keep up with the major do's and don'ts, that also tends to produce clearer code that actually works, I shudder almost every time I have to go back and work on older material I've authored but, total rewrites are often not practical. Mike, mwinter, who frequents these forums is extremely knowledgable about such matters.

gingerDELUCA
05-16-2005, 12:06 AM
DOT:::The dot snapshot I took is a bit weird. The dot is so small but it jumps around a bunch - so I thought you might be interested to know that. I hope the picture helps and I'm not overdoing it.

IE:::cache cleared - I should have thought of that! but I never use IE - I hate it! - I only check stuff. There's still the back button thing. I don't know if that matters. Everything else is OK.

KLUDGE:::I guess I'll go with the kludge. If anybody out there has a valid bug fix, bring it on!!!! I'm supportive of the validation by w3.org. I'm a html/css amateur and I might be totally wrong but some of the errors in the template code just seem unnecessary! I don't understand why they are there... Well, that is a whole different discussion...

*gin

jscheuer1
05-16-2005, 03:30 AM
For IE mac, I can include an onload event handler. I don't like those as they are the surest way to script conflicts for novices trying to use the slide show with another script. I may go to the extent of testing for IE mac and only detect the onload event for it, as it appears to be the only browser that needs it. To me that was part of the beauty of the original code this script derives from, no onload event handler needed.

That Safari dot may be tough. Unless it just hits me what the problem is, I need to see something happen live to have a good shot at fixing it. Fortunately, it is not a major blemish, something I would consider acceptable but, would love to fix if I could. Before we added the links to the caption, it wasn't there, right? Another thing I noticed, apparently Safari has no support for the script font, or perhaps none of the browsers on mac did. The text 'Renaissance Paintings:' was supposed to display in the 'script mt bold' font, a sort of handwritten looking font. Did any of the browsers you used show that?

Back to the kludge, it is telling that both IE6 and NS7.2 didn't need it. So, there is probably a bug or 'feature' in FF that caused it, rather than it being a problem with the code per se. I recently discovered, working on another script that FF specifically refuses to reload on window resize, it isn't a bug, it is a feature. I found an easy work around but, it was maddening for a bit.

jscheuer1
05-16-2005, 04:46 AM
I may have found the problem with Safari, I had left out a closing </a> for the text links. Since there was nothing else on the page, most browsers found no problem. In any case, I'm glad I found that. It would be a big problem in actual use. Also, I put in the onload event handler for IE mac. Not sure if this will fix it but, it's a good chance. When you test, be sure to clear the cache again and reload a few times first. It is live at the same demo address.

Thanx,


-J

gingerDELUCA
05-16-2005, 10:28 PM
New test report (I checked yesterday but checked again today - after cleaning out all the cache etc.- to be sure): It's only working in IE! Everything else isn't moving a bit. Sorry!

As far as IE and the back button stuff goes maybe it's ok to ignore it. I mean how many people use IE on a mac I wonder. It might not be worth putting an onload event handler just for that one browser.

The little dot just came with the title links. If you need to see it maybe I could shoot a little movie of it when it's working again. Or maybe the moving links aren't such a good idea.

Also I did a snapshot so you can see what happened to the fonts. I don't know what it's supposed to look like so here is the pix http://schnickschnack.biz/test2.png

*gin

jscheuer1
05-17-2005, 02:04 AM
That's why I have a mac tester. I had constructed my onload handler only for IE mac but, having no way to test it, didn't realize I was putting all other mac browsers in a no win situation, they were getting neither the onload nor any other handler to start the show! I have remedied that with a new version I just uploaded to the test site. The font, as you say, is not working but, that just means that it is not supported/installed on (your) mac, no big deal, that is the nature of fonts. The big question I have, as you weren't real clear, does IE mac now restart the show using the back button? I don't want to ignore IE mac, as I have heard that although Microsoft no longer supports it, it still ships with like 90% of new macs and in any case, there are a ton of IE macs out there.

I've got a new twist. The first picture has no link. I'm making links optional and have tested it out here. It's working on all three browsers I have.

About fonts, out of curiosity, do any of these:

Test - Palace Script MT

Test - Rage Italic

Test - Script MT Bold

Test - Lucida Handwriting

look like handwritten words (connected letters) to you?

Safari dot - Since this last one didn't work in Safari, I guess you don't know yet. I want to try to explain about 'seeing it'. All the pictures or movies in the world won't help much at this point, just a 'yes it is still there' or 'no it is gone now' is all I need from you. What I mean is, to fix something like that, where I'm not sure what is causing it, it is so much easier to be able to flip back and forth between the editor and the browser until it is fixed, rather than to keep asking someone once or twice a day. This is not to minimize how valuable it is to know about the problem in the first place.

The test link again so you don't have to hunt for it:

http://home.comcast.net/~jscheuer1/side/files/johnslidedemo2.htm


-J

gingerDELUCA
05-17-2005, 05:03 PM
The "Test" fonts show up in all the browsers in whatever preference the browser is set to - no handwritten script.

Script test results coming up. Just a sec.
Oh and the back button IE thing wasn't working last time. I'll check now.

*gin

gingerDELUCA
05-17-2005, 05:24 PM
SAFARI
*running smooth & starts again when back button is used to get there
*little black spot (the curve of the g in Kissing fools in the non link title is visible in all the other titles)
*the line height of the linking titles (they are not underlined any more) is not high enough to cover the g and all the letters y & g are cut off on the bottom
*after a while the show goes back to the old mode with the jumping dot and the titles are underlined again

NETSCAPE
*running smooth & starts again when back button is used to get there

FIREFOX
*running smooth & starts again when back button is used to get there

IE
*running smooth
*doesn't start when I go back to the show via back button
*only starts with the first slide when I reload

*gin

jscheuer1
05-17-2005, 07:10 PM
Safari - that is a css bug with Safari, it is not interpreting relative positioning properly. I can avoid using that, it is not essential to the script, just a style add-on at the top.

Netscape & FF - Hooray!

IE - Still won't reload (on back) even with an event handler, odd. I'll have to research that.

Thank you, *gin,

It will probably take me some time to figure out the IE thing. For Safari, just to be sure, I'll let you know when I have a version without relative positioning ready for viewing.


-J

jscheuer1
05-17-2005, 07:25 PM
OK, new demo is there, same link. Safari should be good now. I also used body onload for all browsers, just to see if that gets it for IE.

jscheuer1
05-17-2005, 08:26 PM
One other thing, do you have any fonts on your computer that have that handwritten look to them? If so, what exactly are they called?

gingerDELUCA
05-18-2005, 04:17 PM
AmericanTypewriter
Apple Chancery
Apple LiSung Light
Apple Symbols
AppleMyungjo
Arial
Arial Black
Arial Narrow
Arial Rounded Bold
Baskerville
BiauKai
BigCaslon
Brush Script
Chalkboard
Cochin
Comic Sans
Copperplate
Courier New
Didot
Fang Song
Futura
Georgia
GillSans
HelveticaNeue
Herculanum
Hoefler Text
Kai
MarkerFelt
Optima
Papyrus
Skia
Song
Times New Roman
Trebuchet
Verdana
Webdings
Zapfino

I think those are all the fonts my mac came with. Oh plus some more asian fonts. I don't really know which one looks handwritten of these. Maybe the markerfelt font is as close to handwriting as it gets.

*gin

gingerDELUCA
05-18-2005, 04:43 PM
Hurray Hurray Hurray!!! The script is running smooth everywhere!!! :D

No more jumping dots + back button works everywhere (except for the stupid blue highlighting staying on in IE when you come back) + fancy font everywhere!!! See: http://schnickschnack.biz/test3.png

CONGRATULATIONS!!!

*gin

gingerDELUCA
05-18-2005, 04:49 PM
Here is one little thingy I just spotted. All the browsers think there is a link on the first picture when I click on it. Safari, Netscape + Firefox quickly say URL cannot be loaded but IE starts going on and on trying to load that link.

Thought you might like to know.

*gin

jscheuer1
05-18-2005, 06:19 PM
OK, that one (with a minor change to avoid a page load on a non-linked picture) is a keeper. I used the Venice font (as an option if my first choice wasn't available), I was hoping for something smaller and bolder but, it looks OK. I may be able to get Venice to appear smaller and bolder but, without messing with my first choice's appearance, could be tricky. That's just style and up to the individual developer using the script though. I'm uploading the advanced version (has more formatting + optional controls) including the fix for non-linked pictures. It has a problem but, I have used a work around for it. If you use the stop button right after a slide displays and hit reverse or mouseover then out a link, it restarts. My work around is to make it so, if that happens, the Play button becomes the stop button but, would rather it not happen. Other than that, see how it looks please.

http://home.comcast.net/~jscheuer1/side/files/johnslidedemo2.htm

gingerDELUCA
05-21-2005, 05:24 PM
John,

I was out of the loop for a while. I will test your script in a sec. Sorry you had to wait.

*gin

gingerDELUCA
05-21-2005, 05:37 PM
Wow, it's getting all fancy. ;) See http://www.schnickschnack.biz/test4.png to find out how it looks on a mac.

*gin

gingerDELUCA
05-21-2005, 05:47 PM
Safari: Working great!!!
Netscape: Working great!!!
Firefox: Working great!!!
IE: No underlining of links. Everything else working!

Good one!!! :)

*gin

jscheuer1
05-21-2005, 07:10 PM
IE: No underlining of links. Everything else working!Are you sure? The reason I ask is that the only thing that pops out at me as causing this should also cause IE mac to have problems with reverse. A first reverse should work but, a second one should not, or not correctly. If I am right about that, other problems would arise with formatting slideshows that contain some slides with titles and some not. When you get to it, let me know. I've just uploaded what I think is the last revision (barring a work around for IE mac if my suspicions are confirmed). It has a step button, represented by an arrow symbol. It is only enabled when the stop button has been pressed. Reverse can be used as before and while stopped to change the step direction. I'm leaving the current one up also but, with a change to highlight the potential IE mac problem. I removed the title/caption from "The Dog Lovers". In IE mac, does this cause the slideshow to jump around a little? The link again:

http://home.comcast.net/~jscheuer1/side/files/johnslidedemo2.htm

The link for the 'final' revision:

http://home.comcast.net/~jscheuer1/side/files/johnslidedemo8.htm

Many Thanks,


- J

gingerDELUCA
05-21-2005, 10:58 PM
Yep, I'm sure see http://www.schnickschnack.biz/test4.png! The browser way on the right is IE.

*gin

gingerDELUCA
05-21-2005, 11:09 PM
IE
upgraded version http://home.comcast.net/~jscheuer1/side/files/johnslidedemo2.htm

*no jumping
*reverse is no problem even if I use it a bunch of times

*gin

jscheuer1
05-22-2005, 04:40 AM
*no jumping
*reverse is no problem even if I use it a bunch of timesBut, still no underline on the links in IE? I can live with that, as long as they are still links, are they?

Were you able to check out the newer version?

http://home.comcast.net/~jscheuer1/side/files/johnslidedemo8.htm

P.S. I can tell that you may be getting tired of all this testing. If that's the case, there is nothing for it other than to say - Thanks for all your help! This last version is the one I want to publish though so, if you would test it, I'd really appreciate it. No rush. By way of explanation, in case you are wondering why I have been so incremental in my examples, mostly it is because it is so much easier to trace a problem if only one or two changes are introduced at a time.

gingerDELUCA
05-22-2005, 06:29 AM
John,

trust me - I am not getting tired of the testing!!! ;) I just happened to be involved in a lot of unescapable activities this week - especially on Thursday and Friday. That's all. But I always try to make a run for the mac - or better this forum - when I can to test your latest versions.

So keep the new versions coming! Try out all the stuff you like to make it a great script! I'll do my best to test asap. Sorry for letting you wait long sometimes. I'm a pretty impatient person and think it must be quite a hassel.

Now to IE, the links just happen to have no underline for some reason but everything works smooth - text/picture links and all! Even the reverse feature you worried about is working super. I did the reverse thing at least 20 times and no problem!

So, I'll move on to testing the new script now, right?!

*gin

PS: I'm actually really excited to see a new script coming to life! Plus it's kinda the slideshow script I've always been looking for!

jscheuer1
05-22-2005, 06:39 AM
Super! I just wanted to let you off the hook if things were getting too much. I can wait and it is easier if I know I haven't lost you. Yes, please move on to the new demo. I am particularly concerned about the step arrow as I had tons of problems with it in my three browsers. I hope the solutions I came up with translate well to mac. Thanks again!


-J

P.S. I am surprised that ddadmin hasn't moved this thread to the JavaScript forum as it no longer has anything to do with a Dynamic Drive script, yet.

gingerDELUCA
05-22-2005, 06:52 AM
See http://www.schnickschnack.biz/test5.png for looks.
Browsers are in the same order as always from left to right: Safari, Netscape, Firefox, IE.

There's one thing I've just noticed in IE - might not be important - the text on the buttons reverse, play/stop, -> is not vertically centered but kind of on the top.

*gin

gingerDELUCA
05-22-2005, 06:59 AM
Yeah I should have let you know that things just got super busy with deadlines etc. Sorry! So now you know if there's an unexpected silence on my part I'm just not quite able to make it to this forum for some reason. I'll definitely let you know when I need to be let off the hook and won't just disappear (that is unless I die or something).

OK, back to the script testing. Give me a sec or two...

*gin

gingerDELUCA
05-22-2005, 07:32 AM
Here we go:

Safari:::SUPER!
Netscape::SUPER!
Firefox:::SUPER!

IE:::As said earlier: no underlining, button text not centered, okay there seems to be some weird stuff. Let me check it out a little more.

Note on ARROW: The changing arrow button is neat! Maybe it's a little hard to figure out what it does and when without a little note but script users can always add that in their html.

Also it would be a little more convenient if the reverse button would be right next to it in case I want to click to change the direction of the arrow. Then again it's nice to have the play in the center. Well, I don't know.

*gin

gingerDELUCA
05-22-2005, 07:55 AM
IE - my least favorite browser in the world is doing it again - messing up! Sorry! Especially because the script worked great in all the other browsers.

REVERSE BUTTON
-when pressed the text "Renaissance Paintings" jumps to the right and goes out of the script style you have defined. It jumps back when it goes to the next slide.

Oh and IE just crashed.
Now - I've got it back up.

ARROW BUTTON
-sometimes I need to click twice to make it go to the next slide
-after a while the arrow turns into an A with a line on top and a copyright sign and then after a while it becomes an arrow again

* gin

jscheuer1
05-22-2005, 05:04 PM
I was worried about that arrow. It is a non-standard character so, it is gone. New demo is:

http://home.comcast.net/~jscheuer1/side/files/johnslidedemo9.htm

I've also tried to improve the overall look of the buttons in IE mac by shielding them from certain style elements. I still have no clue as to the no underline thing and have found a new problem: if you stop and reverse, then step immediately after load, the captions get out of order. Not sure of the fix on that yet.

I've made the links actual links, set to open new windows, and removed links from different images this time, added some images. A version that opens links in same window:

http://home.comcast.net/~jscheuer1/side/files/johnslidedemo10.htm

Please test both, the same window one only needs its link behavior tested as otherwise it is identical.

gingerDELUCA
05-22-2005, 06:21 PM
Safari:::OK
Netscape:::OK
Firefox:::OK


IE
-button text centered now!
-no underlining
-stop button turns into big square button (almost 4 times as big as before) when clicked
-I still need to click twice occasionally to go to the next slide using the arrow button
-I can't see the captions getting messed up though

*gin

gingerDELUCA
05-22-2005, 06:29 PM
LINKS

Safari:::OK
Netscape:::OK
Firefox:::OK
IE:::OK

*gin

jscheuer1
05-22-2005, 09:11 PM
Demo 9 updated trying to fix huge button problem in IE mac.

gingerDELUCA
05-23-2005, 01:40 AM
Nop that didn't do the trick. It's still turning into a huge button. Sorry.

*gin

jscheuer1
05-23-2005, 04:24 PM
Well unless I can figure out why and what to do about it I am disabling entirely the step button for IE mac. I can't tell if the measure I took to accomplish this has worked or not, try:

http://home.comcast.net/~jscheuer1/side/files/johnslidedemo9.htm

in IE mac. There should be no step button. Also try:

http://home.comcast.net/~jscheuer1/side/files/johnslidedemo11.htm

in IE mac. It has no style for the buttons. If the step button behaves, that's a clue. If not, try a demo with just the word 'Step' on that button:

http://home.comcast.net/~jscheuer1/side/files/johnslidedemo12.htm

Now, I am still plagued by a minor bug that so far, you haven't noticed. It goes like this:

1) clear cache
2) reload slide show
3) immediately hit 'stop'
4) after the initial picture has drawn hit reverse
5) hit '<<'
6) look at the caption

If you cannot duplicate this error, hats off to superior mac javascript interpreting.

gingerDELUCA
05-24-2005, 05:55 PM
No step button like you've said but the play button still becomes big when I press stop.

*gin

gingerDELUCA
05-24-2005, 06:00 PM
Even huger play button when I press stop.

I can only view slides using the step button until seated woman then it stops. If I keep on clicking nothing happens. When I press all my previous clicks get interpreted as go backwards really fast.

Also the slide show won't play beyond that same painting.

After pressing a bunch of things it won't play anything anymore.

*gin

gingerDELUCA
05-24-2005, 06:07 PM
Huge button again. And the step doesn't really work for that long. SORRY!
Don't you just love IE?

*gin

gingerDELUCA
05-24-2005, 06:14 PM
I followed your directions and nothing. But I did it again and at the 3rd attempt there was one caption wrong: below the Titian it said Mona Lisa - like it was kind of slow changing to the next caption - but only the one slide was messed up and I've tried to get the error again by repeating you procedure and couldn't.

*gin

jscheuer1
05-24-2005, 06:19 PM
So, would you think it fair to say that with IE mac, whatever the last button in the row is that can change its text label, when that label changes, that button becomes huge?

gingerDELUCA
05-24-2005, 06:27 PM
The button that becomes huge is always the stop/play button. Just the button - not the writing on the button - becomes huge.
Any other buttons there are fine. It happens no matter if the reverse button says reverse or >> or ->.
The stop/play button doesn't become huge when the label on the reverse changes. It become huge when I press stop.

Do you want a pix of the huge button?

*gin

jscheuer1
05-24-2005, 06:40 PM
No thanks, I was confused. So, it never was the step button that got big but always the stop/play button? If so, I haven't even been trying to fix the right thing. I'm very tempted to tell folks that IE mac will only work without the optional controls and to set it up so IE mac sees no controls even when they are enabled for other browsers. But, I'll think about it a bit more first.

gingerDELUCA
05-24-2005, 06:52 PM
Yep! Always the stop/play button! Sorry that wasn't clear.

You should just tell people to do themselves and people who write scripts and html a big favour and dump IE and move on to a better browser. Well, that's just my opinion though. :D

Also I like the script without the controls too!!!

*gin

jscheuer1
05-24-2005, 07:30 PM
I'm with you on that (dumping IE mac) but, it is not that simple. There is a huge installed base and it is still being shipped, unsupported by Microsoft, with new Macs. So, at least having your work degrade well on IE mac is not a bad goal, especially something like a script that will potentially have unknown application. I had one person tell me she was using a script for an intranet and all the browsers were IE mac, and if she couldn't have it look good on them she would lose the account. Talk about nightmares.

gingerDELUCA
05-24-2005, 09:11 PM
I know. Do what you need to do! I mean I always check too that my stuff is working on IE.
I was just kidding because I'm not a big fan of IE. I wish people would avoid using IE on ALL operating systems.
Well, maybe in the future...

*gin

gingerDELUCA
10-27-2005, 09:02 PM
Hi John,

I'm sorry but I'll have to discontinue the testing. I'm way backed up with other stuff. Thanks for all your help!!!

Best Wishes, gin

Hrubesch
12-28-2005, 12:09 AM
... of the original answer/post!

Thank You for the great script and for the even better support here, I am having exactly the same question: How do I get a more low-tech version of the fade-in slideshow - just having it without "fading"?

The code I am using right now:


var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=obj.degree/100
}


fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

So how do I have to change it, to let "low-tech-users" be part of this great slideshow?

On the other hand I can at least show a PHP-Script that populates the array of picturefolders dynamically witch works fine with the above shown code:


header("content-type: application/x-javascript");

function returnimages($dirname=".") {
$supportedfiletypes="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)";
$files = array();
$curimage=0;
if ($handle=opendir($dirname)) {
while(false !== ($file=readdir($handle))) {
if(eregi($supportedfiletypes, $file)) {
echo 'fadeimages['.$curimage.']=["YOUR PATH HERE'.$file .'", "", ""];';
$curimage++;
}
}
closedir($handle);
}
return($files);
}
echo 'var fadeimages=new Array();';
returnimages()


Tanks a lot + wishing You all the best for the upcoming New Year!
Hrubesch

jscheuer1
12-28-2005, 03:32 AM
Said slideshow has been upgraded, it is now the Ultimate Fade-in slideshow (v1.5) (http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm). It has always and continues to have 'low tech' support. For those users whose browsers cannot achieve the fade-in effect, it shows either a simple slideshow without links (for very old browsers) or the complete show, just without fading (for modern browsers like Opera that elect not to support transparency and partial transparency of any kind).

Hrubesch
12-29-2005, 06:55 PM
Thanks for your quick response. I got that. My question was not about having support for older browsers, but giving users with slow performing machines the oppurtunity to use a low-tech version by choice.
Not only for aesthetic reasons I would like to use the same script just without the fade-in part, so my question is, whether this is possible and what has to be changed...