Slideshow - Prevent Images From Flashing - JavaScript and AJAX forum at WebmasterWorld

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>

Slideshow - Prevent Images From Flashing

almo136

Fotiman

almo136

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week