Galleria 플러그인을 사용하여 변경할 수없는 기존 마크 업의 이미지 목록을 표시하고 있습니다.갤러리아 : 온로드 또는 클릭 할 이미지 tigger
이미지를 클릭 할 때 라이트 박스를로드하고 라이트 박스 안에 이미지 갤러리가 있습니다.
내가 필요한 것은 원래의 마크 업에서 클릭 한 이미지를 인덱싱 한 다음 galleria에서 동일한 인덱스 이미지를 트리거하거나 처음에 활성 이미지로로드하는 것입니다.
로드 할 초기 슬라이드를 트리거하거나 설정하면 문제가 발생합니까? 어떤 충고라도 잘 될 것입니다.
마크 업 유사한 아래로 : 모든
<div class="productSlides">
<img alt="Conti Melamine Desk with Sharknose Edge.jpg" src="/Images/test1.jpg" />
<img alt="Conti-Melamine-Desk-with-Sharknose-Edge-FV.jpg" src="/Images/test2.jpg" />
<img alt="Conti-Glass-Desk-FV.jpg" src="/Images/test3.jpg" />
</div>
<div id="galleria"></div>
<script type="text/javascript">
$(document).ready(function() {
//Need to have two sets of images. The inital markup that can be clicked, and the same images added to a Galleria tag to render the gallery.
$('.productSlides').clone().appendTo($('#galleria'));
});
Galleria.loadTheme('/UserUploadedJS/galleria.classic.js');
Galleria.run('#galleria', {
});
$(document).ready(function() {
$('.productSlides img').on('click', function(){
var url = "#galleria"; // sets the link url as the target div of the lightbox
$(this).colorbox({
inline:true, // so it knows that it's looking for an internal href
href:url, // tells it which content to show
width:"70%",
onOpen:function(){ //triggers a callback when the lightbox opens
$(url).show(); //when the lightbox opens, show the content div
},
onCleanup:function(){
$(url).hide(); //hides the content div when the lightbox closes
}
});
var index = $(this).parent().find("img").index(this); //indexes the image cliked
Galleria.ready(function() { //Attempt to show the same indexed image in the galleria
var gallery = this;
gallery.show(index);
});
});
});
</script>