Hello and welcome to our community! Is this your first visit?
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
    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):
    $(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');
    which is based on a div styled like so:
    .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
    <div class="image_wrap">
                      <a id="my_image" href="#">
                         		   <img src="my.jpg" title=""
                              alt="" />
    Here is code for preloading images, but, again, how to bring them into the slideshow using jquery?

    $(window).bind('load', function(){
       var preload = [
       $(document.createElement('img')).bind('load', function(){
        if(preload[0]) this.src = preload.shift();
    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