Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>From looking at the source code, it seems the script should not work: When the array's length is set to zero, it becomes empty - even if the array's length is later changed back (tested and verified in Chrome). </p> <p>Check the jQuery cycle plugin (http://jquery.malsup.com/cycle/). Since you are already using jQuery (or the script is), this might be perfect for you - just generate a single div with all the images inside, then tell the plugin to cycle them, then add new images as needed, and the plugin should use them automatically.</p> <p>Here is the basic demo for this plugin; the usage is super-easy (link jQuery, link the plugin, include the images, point the plugin to the images): <br/> <a href="http://jquery.malsup.com/cycle/basic.html" rel="nofollow">http://jquery.malsup.com/cycle/basic.html</a> (source code)</p> <p>Here is the list of options you can set to customize the plugin, if you want: <br/> <a href="http://jquery.malsup.com/cycle/options.html" rel="nofollow">http://jquery.malsup.com/cycle/options.html</a> <br/> Of particular interest are: fx(the transition used), speed, easing(the speed curve for the transition).</p> <p>Edit: Here's a little script I wrote (untested):</p> <pre><code>Cycler=function(container){ var container=$(container); var running=false; var stopping=false; this.start=function(){ stopping=false; if(!running) run(); } this.stop=function(){ stopping=true; } var run=function(){ if(stopping){ running=false; stopping=false; return; } running=true; var old=container.find(':visible'); var new=old.nextSibling(); if(!new.length) new=container.children(':first'); old.fadeOut('slow'); new.fadeIn('slow', run); } } </code></pre> <p>It's far from perfect, but you can start from that.</p>
 

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