Сбросить или изменить массив слайдов плагина jQuery - PullRequest
Новая
       21

Сбросить или изменить массив слайдов плагина jQuery

10 голосов
/ 24 ноября 2011

Я использую суперразмерный плагин для jQuery, чтобы показывать полноразмерные фоновые картинки. Я хочу изменить массив с изображениями (с jquery.click()), но без перезагрузки страницы. Ссылка загружает содержимое в div через AJAX, и в то же время я хочу переключить массив.

Это код по умолчанию, который я загружаю для суперразмерных: 

$.supersized({
    random: 1,
    image_protect: 0,
    slide_interval: 5000,
    transition: 1,
    transition_speed: 3000,
    vertical_center: 0,
    horizontal_center: 0,
    fit_portrait: 1,
    slides:
    [
        {image : 'imgs/bg-01.jpg'},
        {image : 'imgs/bg-02.jpg'},
        {image : 'imgs/bg-03.jpg'},
    ]
});

Вот что я сделал, чтобы изменить массив: 

$('#link1').click(function() {
    // placeholder for ajax load

    $.supersized({
        random: 1,
        image_protect: 0,
        slide_interval: 5000,
        transition: 1,
        transition_speed: 3000,
        vertical_center: 0,
        horizontal_center: 0,
        fit_portrait: 1,
        slides:
        [
            {image : 'other-imgs/new-bg-01.jpg'},
            {image : 'other-imgs/new-bg-02.jpg'}
        ]
    });
});

но это только добавляет 2 новых изображения к другим 3. Как я могу очистить первый массив и / или заменить его содержимое?

Ответы [ 3 ]

9 голосов
/ 24 мая 2012

ОБНОВЛЕНО

Вот что я делаю, чтобы перезагрузить Supersized с динамическими слайдами и не дать ему сойти с ума от новых слайдов (у меня был случайный прыжок с одного слайда на другой, ускорение)

создайте функцию в вашем главном файле JS, которая будет вызываться для обновления слайдов: 

function start_supersized(slides) {
    $('#supersized-loader').empty().remove();
    $('#supersized').empty().remove();
    $('#hzDownscaled').empty().remove();
    $('body').append('<div id="supersized-loader"></div><ul id="supersized"></ul>');
    $.supersized({slides: slides}); // add your other SZ options here
};

все, что мы здесь делаем, это очищаем и удаляем элементы DOM, которые SZ добавляет в тело нашего документаи снова инициализировать плагин.

Затем мы можем вызвать эту функцию с массивом слайдов в качестве аргумента, то есть: 

var new_slides = [{image: "/img/slide1.png"}, {image: "/img/slide2.png"}];
start_supersized(new_slides);

Это еще не все.Нам нужно настроить пару строк внутри суперразмерного файла JS (да, это взлом, но авторы плагинов не вернутся ко мне)

В неуменьшенной версии скрипта, версии 3.2.7 вам придется:

1) удалить самые первые строки, где это происходит (строки 17/20 или около того) 

    $(document).ready(function() {
        $('body').append('<div id="supersized-loader"></div><ul id="supersized"></ul>');
    });

update

2) add var slideshow_intervals = [];

этот массив будет отслеживать все идентификаторы интервала, которые будет создан плагином

3) найти функцию 

    base._start = function() {

(вокруг строки 124) и добавьте в начало функции эту строку: 

jQuery.each(slideshow_intervals, function(i, e) {
 clearInterval(e);
});

4) везде, где есть вызов setInterval(), добавьте возвращаемое значение в наш массив, например так: 

slideshow_intervals.push(vars.slideshow_interval);

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

2 голосов
/ 01 мая 2014

Чтобы не допустить ускорения SuperSize 3.2.7 при повторной инициализации динамических слайд-шоу.Я внес эти изменения в несжатый файл JavaScript:

поиск функции "base._start" (около строки 116)

paste: clearInterval (vars.slideshow_interval);

в верхней части функции base._start для очистки всех предыдущих инициализированных интервалов.

, которые должны это сделать.

0 голосов
/ 13 апреля 2012

Перед повторным вызовом суперразмерного скрипта я сбрасываю содержимое HTML с помощью: 

jQuery("#thumb-list").remove();
jQuery("#supersized").html('');

И это работает от меня.

...