重置或更改jQuery插件的slide数组

Question

我正在使用jQuery的超大插件来显示完整的背景图片.我想用图像(带jquery.click())更改数组,但不重新加载页面.链接通过AJAX将内容加载到div中,同时我想切换数组.

这是我为超大化加载的默认代码:

$.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.如何清除第一个数组和/或替换它的内容？

Answer 1

更新

这是我用动态幻灯片重新加载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
};

我们在这里所做的就是清空并删除SZ附加到文档正文的DOM元素,并再次初始化插件.

然后我们可以使用slide数组作为参数调用此函数,即:

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>');
    });

更新

2)添加var slideshow_intervals = [];

此数组将跟踪插件将创建的所有间隔ID

3)找到功能

    base._start = function() { 

(在第124行附近)并将此行添加到函数的顶部:

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

4)无论何处有setInterval()调用,都将返回的值添加到数组中,如下所示:

slideshow_intervals.push(vars.slideshow_interval); 

所有这些都用于重置超大的动画间隔,并防止脚本开始在帧和另一帧之间加速.我知道这有点像hacky,但是嘿.

Answer 2

在再次调用超大脚本之前，我使用以下命令重置 HTML 内容：

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

它对我有效。