Как выгружать и загружать массивы json в Galleria для переключения содержимого галереи?

Я пытаюсь создать страницу с возможностью переключения между различными наборами изображений в качестве содержимого моей галереи. Я поставил эксперимент, чтобы попытаться заставить его переключаться между двумя разными наборами изображений, например:

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

Это загружает первый набор изображений «данные», но когда я нажимаю ссылку переключения, он удаляет только первый набор, но не добавляет второй набор («данные2»). Консольных ошибок нет, просто унылая, пустая галерея. Я пробовал использовать splice и push, но это тоже не сработало...

Я хочу, чтобы Galleria загружала изображения 1 и 2 (данные), а когда я нажимаю ссылку #switch, удаляю изображения 1 и 2 и заменяю их изображениями 3 и 4 (данные 2). В конце концов я хотел бы иметь возможность объединить их, но это хорошее начало.


json carousel jquery galleria
person JPollock    schedule 14.06.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward 

$('#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);
});
person user1508976    schedule 16.06.2013
comment
Это работает. Не знаю, как я пропустил этот вариант... Спасибо. Он не удалил миниатюры. Я попытался добавить галерею.lazyLoad(data2), но это не сработало. Отключение ленивой загрузки миниатюр решило проблему, но это не идеально. - person JPollock; 17.06.2013
comment
Вам нужно вызвать lazyLoadChunks после получения новых данных. Плохой ответ обновления. - person user1508976; 17.06.2013
comment
Блестящий. Это полностью работает, но что, если я хочу, чтобы он загружал оба массива при загрузке страницы? Извините за то, что я такой неграмотный в javascript. Я обещаю, что моя копия Javascript: The Definitive Guide находится где-то между здесь и Amazon.com. Это действительно так, я заказал его вчера :) - person JPollock; 18.06.2013
comment
Вероятно, вы ищете .concat()< /а> - person user1508976; 18.06.2013
comment
Почему, да, это то, что я искал. - person JPollock; 18.06.2013