PDA

Click to See Complete Forum and Search --> : Best slide show?

jolene
07-10-2004, 12:42 PM
Hi,
I have tried different fading slide shows and this one seems to be the smoothest for transitions, although it only shows one (default) slide in Opera. Any idea if it can be "fixed" for Opera? It works well in IE, and just straight cuts in Mozilla. The link is: www.loversofbeauty.com
Thank you.




</style>
<script language="JavaScript" type="text/javascript">
<!-- Original: CodeLifter.com (support@codelifter.com) -->
<!-- Web Site: http://www.codelifter.com -->
<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 30;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'f1.jpg'
Pic[1] = 'f2.jpg'
Pic[2] = 'f3.jpg'
Pic[3] = 'f4.jpg'
Pic[4] = 'f5.jpg'
Pic[5] = 'f6.jpg'
Pic[6] = 'f7.jpg'
Pic[7] = 'f9.jpg'
Pic[8] = 'f8.jpg'
Pic[9] = 'f10.jpg'
Pic[10] = 'f11.jpg'
// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>
</head>
<body onLoad="runSlideShow()">

<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=87 width=115>
<img src="f1.jpg" name='SlideShow' width=372 height=266 alt="">
</td>
</tr>
</table>
</center>
Vladdy
07-10-2004, 12:45 PM
And you will get absolutely nothing when JS is disabled...:rolleyes:
When you realize that content accessibility comes before cute effects, try this: www.klproductions.com/klslideshow.html
jolene
07-10-2004, 03:00 PM
Thanks for the reply. But I assume people who have Javascript disabled would still see the first (default) slide, right?
It's inside the <body> like this:

<body>
etc...
<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=87 width=115>
<img src="f1.jpg" name='SlideShow' width=372 height=266 alt="">
</td>
</tr>
</table>
</center>

Thank you.
jolene
07-10-2004, 03:17 PM
oh..I just tried disabling javascript in Opera and I can still see the default slide...no empty spaces. I'm happy with that. Still I imagine most people would have javascript enabled.
Thank you.
neil9999
07-10-2004, 03:21 PM
When linking to the slideshow, try this:

<a href="nonjavascriptversion.html" onclick="window.location='javascriptversion.html'; return false">Slideshow</a>

If they have javascript enabled, they will be taken to the javascript version; if it is disabled the non javascript version.

Neil
Mr J
07-11-2004, 08:01 AM
And you will get absolutely nothing when JS is disabled

Are we not to use Javascript as well as tables
jolene
07-11-2004, 10:08 AM
Thanks Neil.
You mean I should just paste that code <a href="nonjavascriptversion.html" onclick="window.location='javascriptversion.html'; return false">Slideshow</a>

anywhere in the body? But why have the word "Slideshow" visable?
And would people not see the default slide anyway, I mean if they dont have JS enabled?
neil9999
07-11-2004, 01:29 PM
Originally posted by jolene
Thanks Neil.
You mean I should just paste that code......anywhere in the body? But why have the word "Slideshow" visable?
And would people not see the default slide anyway, I mean if they dont have JS enabled?

It depends on which script you're using if you see the first slide or not. The code I gave you is a hyperlink to the slideshow which you put on the navigation bar/menu. Alterniavely, do something like this:

index.html:


<html>
<head>
<title>My page</title>
</head>
<body onload="window.location='jsslideshow.html'">
Sorry, you don't have javascript enabled, so you can't view the slideshow. The content is displayed below:

slideshow content for non JS browsers goes here
</body>
</html>


jsslideshow.html:


<html>
Put javascript slideshow on this page
</html>


If they go to index.html, they will be redirected to the javascript slideshow if they have javascript enabled. If it's disabeld then the onload event won't be executed, therefore staying on the non-javascript (index.html) page.

Hope that helps,

Neil