Reset или изменить слайды массива jQuery-плагина

Я использую supersized plugin для 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'}
        ]
    });
});

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

Ответы

Ответ 1

ОБНОВЛЕНО

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

создайте функцию в основном 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 файла (да, это взломать, но авторы плагинов не вернутся ко мне)

В неинфицированной версии script, версии 3.2.7 вам нужно будет:

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

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

Обновление

2) добавить   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);

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

Ответ 2

Остановить supersized 3.2.7 от ускорения при повторной инициализации динамических слайд-шоу. Я внес изменения в несжатый файл javascript:

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

паста:   clearInterval (vars.slideshow_interval);

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

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

Ответ 3

Перед повторным вызовом суперсортированный script я reset HTML-контент с:

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

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

Ответ 4

$('#link1').click(function() {

api.options.slides = [
  {image : 'other-imgs/new-bg-01.jpg'},
  {image : 'other-imgs/new-bg-02.jpg'}
]}