갤러리 콘텐츠를 전환하기 위해 Galleria에서 json 어레이를 언로드하고로드하는 방법은 무엇입니까?

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> 

이 이미지 "데이터"의 첫 번째 세트를로드하지만 스위치 링크를 클릭하면 그 첫 번째 제거 : 나는 시도하고 같은 이미지의 두 개의 서로 다른 세트 사이를 전환 할 얻기 위해 실험을 설정 설정하지만 두 번째 세트 ("data2")는 추가하지 않습니다. 단지 콘솔 오류가 없으며 단지 슬프고 빈 갤런 리입니다. 나는 스플 라이스를 사용하고 푸시했지만 어느 쪽도 작동하지 않았습니다 ...

Galleria가 이미지 1과 2 (데이터)를로드하고 #switch 링크를 클릭하면 이미지 1을 제거하려고합니다. 두 개를 이미지 3과 4 (데이터 2)로 대체하십시오. 결국 저는 그것들을 결합 할 수 있기를 원합니다. 그러나 이것은 좋은 시작입니다.

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