Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>uhm... something like this?</p> <p>(Array is ZERO base so... initial index is 0 [with 1 you start with "Maybach.png" not "BMW.png" ]).</p> <p>"Add the effect fadeOut while the image is disappearing" - if the image is disappearing is already doing a fade out... you should explain this point...</p> <p>However...</p> <pre><code>var images = ['http://placehold.it/150x100', 'http://placehold.it/120x150', 'http://placehold.it/90x120', 'http://placehold.it/100x100', 'http://placehold.it/100x150', 'http://placehold.it/150x100'], descs = ['BMW', 'Maybach', 'Mercedes-Benz', 'Mini', 'Jaguar', 'Toyota'], links = ['www.url1.com', 'www.url2.com', 'www.url3.com', 'www.url4.com', 'www.url5.com', 'www.url6.com'], index = 0; //start from first image function rotateImage() { $('#test').fadeOut('fast', function() //fadeout all block (if display none collapse your graphics use animate and "opacity") to hide without change display { $(this).find("a").attr('href', links[index]); //add href to url $(this).find("img").attr('src', images[index]); //add src to image $(this).find("#myDesc").text(descs[index]); //add description in desc div $(this).delay(500).fadeIn(2000, function() //delay (a little bit) to wait image load (for bigger image you need longer delay) { if (index == images.length-1) { index = 0; } else { index++; } }); }); } $(document).ready(function() { rotateImage(); //fire first time and then use Setinterval for loop setInterval (rotateImage, 7000); }); </code></pre> <p><a href="http://jsfiddle.net/qkQR5/" rel="nofollow">Example HERE jsfiddler</a></p> <p>I hope this can help.</p> <p>Simple image preload:</p> <pre><code>&lt;img src="path/placeholder.gif" data-src="path/realImage.jpg" style="display:none" /&gt; </code></pre> <p>so the image that be loaded is a gif of trasparent singol pixel. when you need to preload you only need to place <code>data-src</code> in <code>src</code> and than show image... (do this when the prev image of your animation was displayed for prevent the load gap when this image will display)</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload