Forum Moderators: open

Message Too Old, No Replies

Slideshow - Prevent Images From Flashing

         

almo136

9:12 pm on Feb 17, 2011 (gmt 0)

10+ Year Member



Hi,

I have the below code which makes a slideshow out of the images in the ul. It also uses Prototype/Scriptaculous (unfortunately I can't use Jquery).

My problem is when I add quite a few images all of the images flash on the screen for a split second before the slideshow starts. Is there a way to prevent this?

Thanks!

<html>
<head>
<style>
.slidewrapper {
border: 0px solid black;
padding: 10px 0px 0px 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.fadein {
position: relative;
height: 331px;
width: 720px;
}
.fadein img {
position: absolute;
left: 0;
top: 0;
}
.arrived-product {
margin: 0 !important;
text-align: center;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js"></script>

</head>
<body>

<div class="slidewrapper">
<ul class="fadein" onmouseover="stop_slideshow()" onmouseout="start_slideshow()" id="random_slide_show">
<li><a href="/watch-brands/lip-watches.html"><img src='http://www.istockphoto.com/file_thumbview_approve/14136979/2/istockphoto_14136979-dawn-stag.jpg' width="380" height="253" /></a></li>
<li><a href="/watch-brands/nooka-watches.html"><img src='http://www.istockphoto.com/file_thumbview_approve/14135833/2/istockphoto_14135833-feeling-the-nature.jpg' width="380" height="253" /></a></li>
</ul>
</div>

<script type="text/javascript">
var duration = 4000;
var showNextImage = true;
function stop_slideshow(){showNextImage=false;}
function start_slideshow(){showNextImage=true;}
setInterval(function(){if(!showNextImage){return;}
var imgs=$$('.fadein img'),visible=imgs.findAll(function(img){return img.visible();});if(visible.length>1){visible.last().fade({duration:1});}else{imgs.last().appear({duration:1,afterFinish:function(){imgs.slice(0,imgs.length-1).invoke('show');}});}},duration);
</script>

</body>
</html>

Fotiman

9:50 pm on Feb 17, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



The method I would use would be to create your <html> element with a class, such as:

<html class="no-js">

In your CSS, do this:

.js img {
display: none;
}


Then early on in the head of your document, use javascript to replace the 'no-js' class with 'js'. This way, when JavaScript is enabled, your images will get the CSS that gives them display none, and when JavaScript is disabled, all images will still be shown.

I also discuss this method here:
[webmasterworld.com...]

almo136

10:19 pm on Feb 17, 2011 (gmt 0)

10+ Year Member



Actually, it's ok. I found this code for a slideshow which doesn't have the issue described above:

[gist.github.com...]