1

I'm setting up an iPad-Kiosk and need to cycle through images as a slide-show. Right now I use this very basic code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery.cycle2.min.js"></script>
  </head>
  <body>
  <div class="cycle-slideshow">
    <img src="img/01.jpg">
    <img src="img/02.jpg">
    <img src="img/03.jpg">
    <img src="img/04.jpg">
    <img src="img/05.jpg">
    <img src="img/06.jpg">
    <img src="img/07.jpg">
    <img src="img/08.jpg">
    <img src="img/09.jpg">
    <img src="img/10.jpg">
    <img src="img/11.jpg">
    <img src="img/12.jpg">
    <img src="img/13.jpg">
    </div>
  </body>
</html>

But what I really want is to autoload all image-files from a folder. How can I populate a list of image-file-names using ajax/jQuery? Sadly I cannot use php.

thanks!

2 Answers 2

1

here you go, you need to loop through the folder with a variable to check the numbers, and an ajax call to see if the file exists:

var image=1;
function appendImage(){
    if(image<=9) image='0'+image;
    $.ajax({
        url:'img/'+image+'.jpg',
        type:'HEAD',
        success: function()
        {
            $('.cycle-slideshow').append('<img src="img/'+image+'.jpg">');
            image=parseInt(image)+1;
            appendImage();
        }
    });
};
5
  • I see your point. But when I call this function using $(function() { appendImage(); }); </script> I get: XMLHttpRequest cannot load file://......./img/01.jpg. Received an invalid response. Origin 'null' is therefore not allowed access. Commented Aug 16, 2014 at 7:18
  • you can not send an XML request on the local server, it means you need to put the code on a server to be able to send an ajax call! Commented Aug 16, 2014 at 7:29
  • Unfortunately this app has to run on an ipad as a standalone-kiosk in local mode (using kiosk-pro). Is there a workaround for this setup? Commented Aug 16, 2014 at 7:31
  • I've never worked with kiosk-pro therefore I don't know how or if there's a way to check if a file exist, but the idea is to check if the file exist, if it does, then append the img to the element, and add to the counter Commented Aug 16, 2014 at 7:35
  • I see. I like your solution very much but I guess the iPad-Kiosk-Pro doesn't allow XML requests in local mode. I need to find a different solution. thanks. Commented Aug 16, 2014 at 7:41
0
var image=1;

function checkImage(src) {
     var img = new Image();
     img.onload = function() {
     $('.cycle-slideshow').cycle('add','<img src="'+src+'">');
        };
 img.src = src;
}

function appendImage(){
            if(image<=9) 
                image='0'+image;
            var src = 'img/' +image+ '.jpg';
            checkImage(src);
            image=parseInt(image)+1;
};

This is how I did it finally. One disadvantage of this solution is that I call appendImage() about 100 times and just pretend that there are no more images. In my project that's ok, because there won't be more images to load but its a very crude solution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.