Динамически обновляемый ротатор изображений в jQuery/HTML5

Я думаю, что лучше всего, если это вообще возможно, работать с галереей, не делая ничего, что может потребовать ее повторной инициализации. Приведенный ниже подход направлен на достижение этой цели путем замены изображений галереи без замены самих узлов img.

Во-первых, давайте предположим, что код на стороне сервера запущен и работает и каким-либо образом возвращает json, который при декодировании эквивалентен:

[
    "images/aaa.jpg",
    "images/bbb.jpg",
    "images/ccc.jpg",
    "images/ddd.jpg",
    "images/eee.jpg",
    etc.
]

Затем:

$(function(){
    var $galleryImgs = $('#myGallery img');//gallery img nodes in a jQuery wrapper.
    var updateGallery = function() {
        $.ajax({
            url: 'getImageUrls.php', //or whatever
            data: {
                n: $galleryImgs.length //specify how many new image urls to fetch
            },
            dataType: 'json',
            success: function(data) {
                $.each(data, function(i, url) {
                    if($galleryImgs[i]) { //safety
                        $galleryImgs[i].src = url; //replace each gallery image in turn
                    }
                });
            }
        });
    };
    var galleryInterval = setInterval(updateGallery, 60*60*1000);//60*60*1000 for one hour; 30*60*1000 for half an hour
});

Таким образом, плагин галереи будет (надеюсь) продолжать свое вращение, блаженно не подозревая, что его изображения были изменены. Некоторые плагины галерей могут быть более приспособлены к этому, чем другие — необходимо поэкспериментировать.

Что касается удаления и замены файлов, вам придется делать это на стороне сервера. Вы не упомянули язык сервера, поэтому я предлагаю открыть его в другом вопросе. Как только вы разберетесь с этим, вы можете сделать так, чтобы ваш скрипт опрашивал сервер на наличие обновлений, используя ajax.

Запрос будет выглядеть (что-то) так:

 refreshShow = function() {
    $.ajax({
      url: 'imagefeed.json',
      dataType: 'json',
      type: 'post',
      data: {
        gallery: 'homeGallery'
      },
      success: function(data) {
        $('#homeGallery img').remove();
        $.each(data, function(i, image){
          $('#homeGallery').append(
            $('<img />').attr('href', image.path)
          )
        });
      }
    });
  };

Тогда ваш опрос:

$(function(){
  setTimeout(function(){ refreshShow() }, 30000); //polls every 30 seconds for updates
});

Где фид JSON будет подпитывать некоторые пути, возможно, также и подписи. Вы можете найти целую кучу вопросов на SO по созданию вывода JSON на разных языках. Имейте в виду, что это пример кода, и большинство слайд-шоу немного сложнее этого.

Я предполагаю, что изображения в папке имеют разные имена, поэтому вам может потребоваться указать URL-адрес, который вы можете опросить, чтобы получить новые имена файлов, возможно, так:

http://example.com/imagenames

который возвращает json следующим образом:

{
   images: ["i1.jpg", "i1.jpg", "i1.jpg", "i1.jpg", "i1.jpg"],
   version: 12
}

затем вы можете часто делать ajax-запросы к этому URL-адресу, смотреть, не изменен ли номер версии, а затем заменять изображения в карусели изображений. если вы не найдете тот, который позволяет вам динамически менять изображения, это должно быть довольно просто написать.

Вот один из них, вам нужно только добавить автоповорот: http://sorgalla.com/projects/jcarousel/examples/dynamic_flickr_api.html

Нечто подобное можно было бы сделать с помощью языка на стороне сервера и Ajax. Вы не упомянули об этом, поэтому я просто возьму PHP для примера, но концепция будет примерно такой:

А) Запустите ротатор и загрузите изображения в папку.

Б) Используйте setTimeout(); чтобы создать функцию, которая будет использовать Ajax для вызова страницы PHP, которая проверяет каталог и возвращает json имен изображений в проверенном каталоге.

C) Удалите текущие изображения ротатора, а затем повторно заполните его новой информацией из JSON.

Примером может быть:

[PHP]

$listOfImages = new array();

foreach( glob("/uploads/*.jpg") as $file ){
    array_push( $listOfImages, $file ); // gets an array of all the jpgs in the uploads directory
}
return json_encode( $listOfImages );

[JQuery]

<script type='text/javascript'>


    $(function($){
        var slider = new Slider(); //Pseudo-class for a slider
        setTimeout(function(){

           $.ajax({
             url:"update-slider-with-images.php",
             type:"post",
             dataType:"json",
             success:function(data){

               slider.clearAllImages(); //pseudo function to remove images from slider

               var images = JSON.parse( data );
               for(image in images){

                  slider.addImage( image ); //Psuedo function to add image to the rotation queue

               }

               slider.slide(); // Pseudo function to start the slider

            }

         });

        },300000); // check every 6 minutes

    });

</script>

Это, вероятно, не все, что вам нужно, так как вам нужно будет создать класс ползунка или каким-то другим образом переопределить этот код в моем примере, но этого должно быть достаточно для начала, при условии, что вы знаете PHP. Если вы этого не сделаете, я не думаю, что это слишком сложно преобразовать во что-то другое. Я знаю, что Rails может работать с файловой системой, и я уверен, что ASP.Net тоже может.

Пример пирамиды Python

У меня уже есть реализация этого и работающая, но у меня просто нет автоматической смены изображений. Я использую запрос ajax для

/basic_stats/graph.png?graph.type=IMAGE

где /basic_stats/graph.png — это просто маршрут, который я настроил для определенного представления. Вашему слайдеру изображения все равно, если вы передаете аргументы в ссылке на изображение, если маршрут возвращает ожидаемый png или jpg. В моем случае у меня есть автоматизированный процесс, который запускает статистику в фоновом режиме, а затем сохраняет изображения в слой Redis, который представляет для /basic_stats/graph.png? настроен на опрос. Затем я просто запрашиваю request.params['some_key_value'] и возвращаю изображение в качестве объекта ответа. Тогда вам вообще не нужно делать какую-либо магию ajax, просто сгенерируйте правильный объект ответа.

Из __init__.py

config.add_route('ImageSlider', '/images/ImageSlider.png')

Из представлений.py

@view_config(route_name='ImageSlider')
def ImageSlider(request):
    imgData = None
    if 'graph.type' in request.params:
        if request.params['image.name'] == 'ImageSlider1':
            r_server = redis.Redis('127.0.0.1')
            imgDataObj = r_server.get('ImageSlider1')
            del r_server
            imgData = pickle.loads(imgDataObj)
        elif request.params['image.name'] == 'ImageSlider2':
            r_server = redis.Redis('127.0.0.1')
            imgDataObj = r_server.get('ImageSlider2')
            del r_server
            imgData = pickle.loads(imgDataObj)
    return Response(body_file=imgData, content_type='image/png')

В этом примере используется Redis для хранения сериализованных данных изображения, но вы можете довольно легко загружать файлы из FS с помощью PIL ex

imgData = Image.open("/images/ImageSlider1.png")

Теперь вы можете заставить представление реагировать на любые изображения, которые вы хотите в этих конкретных местах. Затем просто передайте местоположение вашего изображения как таковое вашему слайдеру.

Ссылки на ваш слайдер

src="/images/ImageSlider.png?image.name=ImageSlider1"
src="/images/ImageSlider.png?image.name=ImageSlider2"

И просто пусть ваше представление динамически настраивает изображение, которое оно отвечает. Redis позволяет вам установить тайм-аут ваших ключей и заставить внешний процесс повторно заполнить ключи при прослушивании, чтобы предоставить новые изображения на ваш веб-сервер. Обратите внимание, что это, вероятно, не будет масштабироваться при перемещении данных изображения, а для внутреннего приложения для создания отчетов по базовой статистике, которое я использую, потому что это здорово и быстро. Я не тестировал его под нагрузкой, чтобы узнать, каковы верхние пределы, но у нас не будет очень много одновременных пользователей.

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

Я предполагаю, что цепочка вызовов рендеринга представления в Backbone.js для изменения src изображения во время произвольного обновления также может работать, но я еще не очень далеко зашел в кроличью нору Backbone.js, и эта концепция, вероятно, ограничена Backbone.js.

Redis
Пирамида

У меня есть простой метод jQuery, который может вас заинтересовать.

В примере используется ротатор изображений JW Image Rotator, который использует внешний файл в формате XSPF, Формат тегов RSS и ASX.

Это также может быть простой и простой текстовый XML-файл, который предоставляет загружаемая демонстрация. Вы можете использовать Flicker, а затем получить доступ к этим RSS-каналам, чтобы оптимизировать плейлисты.

Что касается первой проблемы, о которой вы упомянули, обновление Image Rotator без обновления веб-страницы показано в демонстрации с помощью простого setTimeout. Он перезагружает либо тот же файл playlist.xml, который был ранее обновлен, либо использует другой файл списка воспроизведения.

Чтобы решить вашу вторую проблему, файлы playlist.xml упрощают работу, когда они перезагружаются в указанное время, поскольку они автоматически принудительно обновляют содержимое, которое у вас есть в папке с изображениями (если например, без использования RSS-каналов).

Всякий раз, когда вы перезаписываете файлы, например 01.jpg в 10.jpg, во время события перезагрузки новые файлы будут захвачены благодаря извлечению JW Image Rotator. их.

Это означает отсутствие временных меток или других хаков для принудительной перезагрузки. Чтобы сделать еще один шаг вперед, вы можете иметь массив списков воспроизведения, которые могут автоматически циклироваться, чтобы иметь полностью автоматизированный процесс.

В DEMO есть много комментариев и несколько сообщений журнала консоли, чтобы объяснить, что происходит, чтобы вы могли адаптировать методы демонстрации к любому другому ротатору изображений или плагину для изображений. там.

Вот ДЕМО-версия jsFiddle, которая представляет собой учебную версию.

Эта ДЕМО-версия на jsFiddle не содержит комментариев или консоли, поэтому вы можете четко видеть код.

Вот pastebin обучающей версии, которую можно загрузить.

Чтобы попробовать эту DEMO локально, вам понадобится JW Image Rotator с открытым исходным кодом, в настоящее время версии 3.18, который теперь имеет водяной знак JW, но v3.17< /strong> этого нет... он заархивирован ЗДЕСЬ и он включает все исходные файлы, включая .fla Flash-файлы.