1

ギャラリー コンテンツとして異なる画像セットを切り替える機能を備えたページを構築しようとしています。次のように、2 つの異なる画像セットを切り替える実験を設定しました。

<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」がロードされますが、スイッチリンクをクリックすると、最初のセットのみが削除され、2 番目のセット (「data2」) は追加されません。コンソール エラーはなく、悲しい、空のガレリアだけです。splice と push を使用してみましたが、それもうまくいきませんでした...

私がやりたいことは、ガレリアが画像 1 と 2 (データ) をロードし、#switch リンクをクリックすると、画像 1 と 2 を削除し、画像 3 と 4 (データ 2) に置き換えることです。最終的にはそれらを結合できるようにしたいのですが、これは良いスタートです。

4

1 に答える 1

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

lazyLoadChunksEDIT：データ変更後に呼び出す必要があります。小さなタイムアウトが必要です。

$('#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 に答える