1

I want to display a few animated "illustrations" on a website I'm working on.

.gif is not an option due to significant loss of quality.

Is there any solution out there that would allow me to iterate through a folder of PNG's and display them on screen?

Thanks in advance.

Martin Velchevski
  • 874
  • 11
  • 33
  • 1
    There are plenty of ways to do it. You can use `setInterval` and change the `.src` attribute of an image to an increasing counter for a very basic example. It's very broad and subjective and there is no "universal" solution - it's on a per case basis. – Benjamin Gruenbaum Oct 26 '13 at 11:25

1 Answers1

2

something like this will work if the images are named 1.png through 25.png for example.

var slides = 25; //number of slides
var i = 1; //first slide
var delay = 200; //set delay
var timer;

function pngani() {
    if (i <= slides) {
        $('#show img').attr('src', 'pathtofile/' + i + '.png');
    }
    i++;
}
$('#start').click(function () {
    timer = setInterval(pngani, delay);
    pngani();
});
$('#pause').click(function () {
    clearInterval(timer);
    timer = null;
});
$('#reset').click(function () {
    i = 1;
    $('#show img').attr('src', 'pathtofile/' + i + '.png');
});

I added a start, pause, and reset button, so the execution can be controlled.

made a fiddle: http://jsfiddle.net/filever10/Kur9u/

FiLeVeR10
  • 2,155
  • 1
  • 12
  • 13
  • Dude! Thank you so much for your help! I actually went ahead and tweaked the function and it is now working great... Well... at least on the local version of the site. It's a whole other story when I deployed the page on the interwebz... Is it possible to preload all images within a given folder? I looked at some of the jquery preloaders out there but none of them seemed to have this kind of functionality. Thanks once again! – Martin Velchevski Nov 05 '13 at 16:01
  • No problem, glad to help. You can try out the different jquery image loaders. Here's a decent way to preload http://stackoverflow.com/questions/476679/preloading-images-with-jquery . You can also put all the images in a container, and make them `visibility:hidden`, which will cache the images in the browser, so they don't have to reload when you use them in your js. – FiLeVeR10 Nov 05 '13 at 16:29