StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The downside I see to doing it like this is that there will be a load period for the new image and the animation may be a little quirky because of it. It may be beneficial to have two parts to that file where a path is returned if a $_GET value is equal to one thing, and the image is returned if that $_GET value is not set or it equals something else. That way you could preload a series of images and there would be a smoother animation between images.</p> <p>Having said that, it seems to me that something like this should work. </p> <pre><code>$(document).ready(function(){ function swapImage(){ var time = new Date(); $('#image').fadeOut(1000) .attr('src', 'http://mydomain.com/images/rotate.php?'+time.getTime()) .fadeIn(1000); } var imageInterval = setInterval('swapImage()',10*1000); }); </code></pre> <p>The time makes it so the browser think it's getting a new image.</p> <p><strong>Spacer.gif</strong></p> <p>To do this with a black spacer, I'd recommend wrapping your image in a div and giving the div a #000 background color to match the spacer:</p> <pre><code>#image-wrap{background-color:#000;} </code></pre> <p>It would make it so the image actually faded to black, rather than fading to your current background color, changing to black, and fading back in. The js would be very similar to the above:</p> <pre><code>function swapImage(){ var time = new Date(); $('#image').fadeOut(1000) .attr('src', 'http://mydomain.com/spacer.gif') .attr('src', 'http://mydomain.com/images/rotate.php?'+time.getTime()) .fadeIn(1000); } var imageInterval = setInterval('swapImage()',10*1000); </code></pre> <p>Keeping the time in there probably isn't necessary, but hey, it's another safe-guard against the browser caching the "image".</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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