Цикл2 с папкой в ​​качестве источника изображения

Я настраиваю iPad-Kiosk и мне нужно переключаться между изображениями в виде слайд-шоу. Прямо сейчас я использую этот очень простой код:

<!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>

Но то, что я действительно хочу, это автозагрузка всех файлов изображений из папки. Как я могу заполнить список имен файлов изображений с помощью ajax/jQuery? К сожалению, я не могу использовать php.

Спасибо!

Источник

2 ответа

Решение
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;
};

Вот как я это сделал наконец. Одним из недостатков этого решения является то, что я вызываю appendImage() около 100 раз и просто делаю вид, что больше нет изображений. В моем проекте это нормально, потому что не будет больше изображений для загрузки, но это очень грубое решение.

Источник

Здесь вам нужно перебрать папку с переменной, чтобы проверить числа, и вызвать ajax, чтобы увидеть, существует ли файл:

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();
        }
    });
};
Источник
Другие вопросы по тегам