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 1 of 1
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    553
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jquery fade images from array over initial image?

    I am trying to use jquery to overlay a first loaded image with others that are not present in the html (I cannot change the html on the page). I have seen many jquery slideshows, but they all seem to rely on the images being already in the document, usually set to hidden.

    I would like to use a function like the following (developed by Jon Raasch):
    Code:
    $(document).ready( function() {
      // Every six seconds execute the switchSlide() function
      setInterval( "switchSlide()", 6000);
    });
    
    // This function takes the first .slide element and put at the end
    function switchSlide() {
      var slide = $('.slideshow .slide:first');
      slide.hide();
      $('.slideshow').append(slide);
      slide.fadeIn('slow');
    }
    which is based on a div styled like so:
    <style>
    .slideshow {
      height: 220px;
      width: 350px;
      margin: 0;
      position: relative;
    }
    
    .slideshow .slide {
      position: absolute;
    }
    but I cannot change the html (which is shown below), so I need to preload the images that will fade in over the first and then somehow get some slideshow code to work from the array of loaded images
    Code:
    <div class="image_wrap">
                      <a id="my_image" href="#">
                         	           
                         		   <img src="my.jpg" title=""
                              alt="" />
    
                         	   </a>
                      
                   </div>
    Here is code for preloading images, but, again, how to bring them into the slideshow using jquery?

    Code:
    $(window).bind('load', function(){
       var preload = [
    	'cov1.jpg',
    	'cov2.jpg',
    	'cov3.jpg'];           
       $(document.createElement('img')).bind('load', function(){
        if(preload[0]) this.src = preload.shift();
       }).trigger('load');
    G
    Last edited by WA; 06-10-2009 at 05:54 PM.


 

Posting Permissions

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