www.webdeveloper.com
Results 1 to 11 of 11

Thread: how do i make the slideshow start when everything has loaded?

  1. #1
    Join Date
    Jan 2008
    Posts
    106

    how do i make the slideshow start when everything has loaded?

    my problem is when the page loads, the javascript slideshow starts to play even if the image has not yet finished loading... in effect the first image is not displayed since the image is still loading..

    what i hopefully want is to start the slide show when all the images has loaded so that the slideshow will run smooth..

    Code:
    <div id="slideshow">
        <img src="Image/image1.jpg" alt="Slideshow Image 1" class="active" />
        <img src="Image/image2.jpg" alt="Slideshow Image 2" />
        <img src="Image/image3.jpg" alt="Slideshow Image 3" />
        <img src="Image/image4.jpg" alt="Slideshow Image 4" />
    </div>

    javascript
    Code:
    function slideSwitch() {
        var $active = $('#slideshow IMG.active');
    
        if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    
        // use this to pull the images in the order they appear in the markup
        var $next =  $active.next().length ? $active.next()
            : $('#slideshow IMG:first');
    
        // uncomment the 3 lines below to pull the images in random order
        
        // var $sibs  = $active.siblings();
        // var rndNum = Math.floor(Math.random() * $sibs.length );
        // var $next  = $( $sibs[ rndNum ] );
    
    
        $active.addClass('last-active');
    
        $next.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, 1000, function() {
                $active.removeClass('active last-active');
            });
    }
    
    $(function() {
        setInterval( "slideSwitch()", 4000 );//speed of changing image
    });

  2. #2
    Join Date
    Jan 2008
    Posts
    106
    tried this and what happened was only the first image was showing..

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
    
    <head>
    <link rel="shortcut icon" href="favicon.ico">
    
    <!-----Metatags here--------->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <!-----Metatags here--------->
    
    
    
    
    <title>tation</title>
    
    <!-----Javascript and CSS codes here------->
    <link rel="stylesheet" type="text/css" href="js-css/layout.css" />
    <script type="text/javascript" src="js-css/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="js-css/slideshow.js"></script>
    <!-----Javascript and CSS codes here------->
    
    </head>
    
    <body onload"startShow()">
    
    <div id="topsection">
    
      <center>
      <table width="840px" border="0">
      <tr>
      <td><div align="left"><img src="Image/logo2.png" width="558" height="129" /></div></td>
      	  </tr>
          
       	  <tr>
          <td>
    	 	 <ul class="glossymenu">
            <li><a href="contactus.html"><b>Contact Us</b></a></li>
            <li><a href="facts.html"><b>Facts</b></a></li>
            <li><a href="products.html"><b>Products</b></a></li>	
            <li  class="current"><a href="index.html"><b>Home</b></a></li>	
    		</ul>
    	</td>
        </tr>
      </table>
    </center>
    
    </div>
    
    
    <div id="maincontainer">
    
    <div id="contentwrapper">
    <div id="contentcolumn">
    
    <div class="index">
    <br/>
    <center>
    <table width="546" border="0">
      <tr>
        <td width="811">
        
    <div id="slideshow">
        <img src="Image/image1.jpg" alt="Slideshow Image 1" class="active" />
        <img src="Image/image2.jpg" alt="Slideshow Image 2" />
        <img src="Image/image3.jpg" alt="Slideshow Image 3" />
        <img src="Image/image4.jpg" alt="Slideshow Image 4" />
    </div>
    <!---end of division for the slideshow---->
    
    </td>
      </tr>
    </table>
    </center>
    <br/>
    <strong><u></u></strong> is your complete water store. Our machines is equipped with a 16-Stage Pure & Fresh Water Purification System, which produces the highest quality drinking water available.Our unique purification system makes other agents that affect the taste and healthfulness of water.<br /><br />
    
    <strong><u></u></strong> not only offers this wide range of products related to water treatment applications, but strives to develop long-term strategic partnerships with our top customers by identifying quality product sourcing, competitive pricing, consolidation services and other professional support services.	
    <br />
    <br />
    <strong><u></u></strong> provides healthy water for every Filipino. A regular maintenance check-up is initiated to ensure that the system is running smoothly. Our purification process not only makes the water healthier but it also makes it taste bettehas the leasing edge in water purification.
    
    </div>
    </div>
    </div>
    
    
    <div id="footer">&copy;  <br> Powered by <b><u>sheramf</u></b></div>
    
    </div>
    
    </body>
    </html>


    Code:
    
    function slideSwitch() {
        var $active = $('#slideshow IMG.active');
    
        if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    
        // use this to pull the images in the order they appear in the markup
        var $next =  $active.next().length ? $active.next()
            : $('#slideshow IMG:first');
    
        // uncomment the 3 lines below to pull the images in random order
        
        // var $sibs  = $active.siblings();
        // var rndNum = Math.floor(Math.random() * $sibs.length );
        // var $next  = $( $sibs[ rndNum ] );
    
    
        $active.addClass('last-active');
    
        $next.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, 1000, function() {
                $active.removeClass('active last-active');
            });
    }
    
    function startShow() { 
        $(function() { 
            setInterval( "slideSwitch()", 4000 );//speed of changing image 
        }); 
    }

  3. #3
    Join Date
    Jan 2009
    Posts
    3,346
    You can try using one of the old preloading techniques from ages ago. You simply loop through all your image URLs and append them to the src attribute of dynamically created img elements that you never append to the DOM. This should at least initiate the download process for them by the time you start using them.

  4. #4
    Join Date
    Jan 2008
    Posts
    106
    Quote Originally Posted by criterion9 View Post
    You can try using one of the old preloading techniques from ages ago. You simply loop through all your image URLs and append them to the src attribute of dynamically created img elements that you never append to the DOM. This should at least initiate the download process for them by the time you start using them.
    i didn't quite understand that .... do you have sample codes?

  5. #5
    Join Date
    Jan 2009
    Posts
    3,346
    Something like?
    Code:
    //assuming photos is an array of photo urls
    myImageLoader = new Image();
    for(var i = 0; i < photos.length; i++){
    myImageLoader.src = photos[i]; //could use objs here instead of that is what you have already
    }
    myImageLoader.onLoad=everythingReady(); //assuming everythingReady is a function that will start your slideshow
    A little googling for "preloading images javascript" found some tutorials and such:
    Link1
    Link2
    Link3
    etc...

  6. #6
    Join Date
    Jan 2008
    Posts
    106
    it doesn't work in firefox..it works on chrome and IE

  7. #7
    Join Date
    Jan 2009
    Posts
    3,346
    I didn't test it or anything. Do you get an error message?

  8. #8
    Join Date
    Jan 2008
    Posts
    106
    there was no error message... but when i tried it in firefox the image won't change..

  9. #9
    Join Date
    Jan 2009
    Posts
    3,346
    Did your original code work before in FF? This shouldn't have an effect on that. Is it possible that the function starting your slideshow never fires?

  10. #10
    Join Date
    Jan 2008
    Posts
    106
    yeap it worked before i added the startshow function

  11. #11
    Join Date
    Jan 2009
    Posts
    3,346
    Is it possible that the function starting your slideshow never fires?
    See second question above.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles