Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript Slideshow is Flickering

    I am having some trouble with a javascript slideshow that I am currently developing.

    1. There is a flicker when all of the images are loaded onto the page. I have tried preloading the images (not necessary since they are all on the page and load by themselves) and the solution is to set display to none on each image until the slideshow starts. I have tried this a few different ways and have been unsuccessful. I am sure that I am setting them back to block in the wrong part of the code or doing something wrong.

    2. It seemed to only be working in firefox. I don't understand why this would be.

    The url is http://www.trideltauci.com/photos.php

    Any help is greatly appreciated, I need to have this project done by Monday. I am stumped at the moment, so hopefully someone can help out. I am still pretty new to JS.

    Thank you, (code is below)
    Matt

    Here is the CSS:
    Code:
    img.slide {
    	position: absolute;
    	top: 0;
    	left: 0;
    }
    #slideshow {
    	position: relative;
    	width: 600px;
    	height: 400px;
    	margin-left: auto;
    	margin-right: auto;
    	text-align: center;
    	overflow: hidden;
    }
    Here is the included photos.js JavaScript:
    Code:
    var numslides=0,currentslide=0;
    var slides = new Array();
    imgs=document.getElementsByClassName("slide");
    function MakeSlideShow() {
       	for (i=0; i<imgs.length; i++) {
          	if (imgs[i].className != "slide") continue;
          	slides[numslides]=imgs[i];
    		if(i == 0) {
    			slides[i].style.display="block";
    		}else{
    			slides[i].style.display="none";
    		}
    		numslides++;
       	} // end for loop
    	var start=setTimeout("NextSlide()",3000);
    } // end MakeSlideShow()
    
    function NextSlide() {
    	nextslide=currentslide + 1;
       	if (nextslide >= numslides) nextslide = 0;
    	
    	new Effect.Parallel([
       		new Effect.Fade(slides[currentslide], { sync: true }), 
      		new Effect.Appear(slides[nextslide], { sync: true }) 
    	], { 
      		duration: 0.8
    	});
    
    	currentslide++;
       	if (currentslide >= numslides) currentslide = 0;
    	next=setTimeout("NextSlide()",3000);
    }
    
    // create the slideshow when the page loads
    window.onload=MakeSlideShow;
    Here is part of the Head HTML section:
    Code:
    <link href="includes/tridelta.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/tridelta.js"></script>
    <script type="text/javascript" src="js/photos.js" language="javascript"></script>
    <script type="text/javascript" src="js/prototype.js" language="javascript"></script>
    <script type="text/javascript" src="js/scriptaculous.js" language="javascript"></script>
    <script type="text/javascript" language="javascript">
    for(i=0;i<30;i++) {
    	photo = new Image();
    	photo.src = "images/photos"+i+".jpg";
    }
    </script>
    Here is the body section:
    Code:
    <div id="slideshow">
    <img class="slide" src="images/photos1.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos2.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos3.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos4.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos5.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos6.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos7.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos8.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos9.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos10.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos11.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos12.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos13.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos14.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos15.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos16.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos17.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos18.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos19.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos20.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos21.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos22.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos23.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos24.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos25.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos26.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos27.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos28.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos29.jpg" width="600px" height="400px">
    <img class="slide" src="images/photos30.jpg" width="600px" height="400px">
    </div>

  • #2
    New Coder
    Join Date
    Aug 2007
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    anyone?

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,513
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    for(i=0;i<30;i++) {
    	photo = new Image();
    	photo.src = "images/photos"+i+".jpg";
    }
    will only preload one image as variable photo is overridden in the loop, try


    Code:
    var photo=[];
    for(i=0;i<30;i++) {
    	photo[i] = new Image();
    	photo[i].src = "images/photos"+i+".jpg";
    }
    if that does not help I will have another look
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •