2014-03-06 2 views
0

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> 

답변

0

먼저

Galleria.loadTheme('/UserUploadedJS/galleria.classic.js'); 
Galleria.run('#galleria', 
{ 
    show: selectedIndex 
}); 

var selectedIndex=0; 
Galleria.ready(function() { //Attempt to show the same indexed image in the galleria 
      var gallery = this; 
      selectedIndex=index; 
      //gallery.show(index); 
     }); 

처럼 갤러리아의 준비 이벤트에 갤러리아의 선택된 이미지의 인덱스를 가져옵니다 내 말에 코드를 그 작업 벌금을 테스트 한 이미 색인을 얻기 위해 스크립트를 사용하십시오.

0

내가 원하는 것을 얻기 위해 스크립트를 편집했습니다. 어쩌면 당신에게도 유용 할 수 있습니다.

나는이 질문에 답하기에는 너무 늦었다 고 알고 있지만 다른 사람들에게 도움이 될 수 있습니다.

필자의 경우 galleria.io 데이터 소스가 업데이트되어 필요에 따라 더 많은 이미지를 추가합니다. 그럼이 전화를합니다.

Galleria.get (0) .load (dataUpdated, undefined, {show : YOUR_POSITION});

load : function(source, selector, config) { 

    //... 

    // use the dataConfig set by option 
    config = config || o.dataConfig; 

    // Edited: 20150516 - Added by tuliocacalazans 
    // Override show position 
    // Added in line 3840, script version: galleria-1.4.2.js 
    if (typeof config.show === 'number') { 
     o.show = config.show; // o = this._options 
    } 

    //... 
}