1

我正在尝试构建一个能够在不同图像集之间切换的页面作为我的画廊内容。我设置了一个实验，试图让它在两组不同的图像之间切换，如下所示：

<div id="galleria"></div>
<div class="under-galleria">
     <a href=# id="g-play-pause">Play/Pause</a>
     <a href=# id="switch">SWITCH</a>
</div>

<script>    
//content
var data = [
{
    thumb: 'img/thumb.1.jpg',
    image: 'img/med.1.jpg',
    big: 'img/lrg.1.jpg',
},
                                    {
    thumb: 'img/thumb.2.jpg',
    image: 'img/med.2.jpg',
    big: 'img/lrg.2.jpg',
},

];
var data2 = [
{
    thumb: 'img/thumb.3.jpg',
    image: 'img/med.3.jpg',
    big: 'img/lrg.3.jpg',
},
                                    {
    thumb: 'img/thumb.4.jpg',
    image: 'img/med.4.jpg',
    big: 'img/lrg.4.jpg',
},
];                          

//left and right arrows control from keyboard
Galleria.ready(function() {
var gallery = this; 
 gallery.attachKeyboard({
        left: gallery.prev,
        right: gallery.next,
    });
 });

 //load theme                                                               
 Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');

 //configure
Galleria.configure({
    thumbnails:'lazy',
    lightbox: true,
    dataSource:data
});
//on ready functions (lazy load, auto play)
Galleria.ready(function(){
    this.lazyLoadChunks(3);
    this.play(3000);
});

 //run and extend
 Galleria.run('#galleria', {
//play/pause toggle
    extend: function() {
        var gallery = this; 
        $('#g-play-pause').click(function() {
            gallery.playToggle()
        }); 
        $('#switch').click(function() {
            gallery.destroy({dataSource:data})
            gallery.load({dataSource:data2})
        }); 
    }
}); 

</script>

这会加载第一组图像“数据”，但是当我单击切换链接时，它只会删除第一组，但不会添加第二组（“data2”）。没有控制台错误，只是一个悲伤的空荡荡的画廊。我尝试使用拼接和推送，但这也不起作用......

我想要做的是让 Galleria 加载图像 1 和 2（数据），当我单击 #switch 链接时，删除图像 1 和 2 并用图像 3 和 4（数据2）替换它们。最终我希望能够将它们结合起来，但这是一个好的开始。

4

1 回答 1

2 
$('#switch').click(function() {
    gallery.load(data2);
});

编辑：您需要lazyLoadChunks在数据更改后致电。需要小超时。

$('#switch').click(function() {
    gallery.load(data2);
    window.setTimeout(function(){
        gallery.lazyLoadChunks(3);
    },10);
});

或者你可以听data事件

Galleria.ready(function(){
    var gallery = this;
    $('#switch').click(function() {
        gallery.load(data2);
    });
}); 
Galleria.on('data',function(){
    var gallery = this;
    window.setTimeout(function(){
        gallery.lazyLoadChunks(3);
    },10);
});
于 2013-06-16T20:47:46.023 回答