Question

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

<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>

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

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

Answer 1

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

如何在Galleria中卸载和加载json数组来切换图库内容？

1 个答案: