BlueImp의 갤러리 - 이미지 집합이 다른 갤러리

Question

나는 BlueImp Gallery을 사용하고 있습니다.

제목에서 알 수 있듯이 페이스 북 이미지 게시물을 상상해보십시오. 사용자가 게시물의 이미지를 클릭하면 해당 게시물에 속한 모든 이미지 만 표시하려고합니다. 나는 이것을 구현하는 방법을 모른다.

무엇보다 먼저 내가 문서를 참조해야

, 우리는이

<div id="links"> 
    <a href="images/banana.jpg" title="Banana"> 
     <img src="images/thumbnails/banana.jpg" alt="Banana"> 
    </a> 
    <a href="images/apple.jpg" title="Apple"> 
     <img src="images/thumbnails/apple.jpg" alt="Apple"> 
    </a> 
    <a href="images/orange.jpg" title="Orange"> 
     <img src="images/thumbnails/orange.jpg" alt="Orange"> 
    </a> 
</div> 

처럼 HTML이있을 때이

document.getElementById('links').onclick = function (event) { 
    event = event || window.event; 
    var target = event.target || event.srcElement, 
     link = target.src ? target.parentNode : target, 
     options = {index: link, event: event}, 
     links = this.getElementsByTagName('a'); 
    blueimp.Gallery(links, options); 
}; 

스크립트와 같은 JS 순수한 스크립트가 작동이 앵커 태그를 감싸는 getElementById ('links') 때문에

내 문제는 내가 (이 실제로 부트 스트랩 썸네일 트위터됩니다) 내가 <a>에서 사용을 클릭 한 다음 모든 이미지는이 게시물에 속하는 올라올 때 자동으로 감지 할

<div id="post1"> 
<div class="row"> 
    <div class="col-xs-3"> 
     <a href="/test1.jpg" class="thumbnail" target="_blank"> 
      <img src="test1.jpg"> 
     </a> 
    </div> 
    <div class="col-xs-3"> 
     <a href="/test2.jpg" class="thumbnail" target="_blank"> 
      <img src="test2.jpg"> 
     </a> 
    </div> 
</div> 
</div> 

같은 HTML을

입니다 . 현재

:

$(document).on('click', 'a.thumbnail', function() { 
    var link = $(this); 
    blueimp.Gallery(link); 
}); 

는 이제 <a href="test2.jpg">에 사용자가 클릭을 가정 해 봅시다. 이 함수는 test.jpg 만 표시합니다. test2.jpg를 표시하고 test1.jpg로 왼쪽으로 슬라이드 할 수 있습니다.

어떻게 그 아이디어를 얻을 수 있습니까? 내가 솔루션

발견 JQuery와 기능이 문제에 대한이 내 머리 T_T

Answer 1

를 긁적되었다. 데이터 갤러리

의 사용 링크를 보라

https://github.com/blueimp/Gallery#container-ids-and-link-grouping

Answer 2

컨테이너 식별자와 데이터 갤러리 속성 값이 유효한 ID 문자열이

경우 그룹화 링크 (예 : "# blueimp-gallery"), 컨테이너 옵션으로 사용됩니다.

<div id="fruits"> 
    <a href="images/banana.jpg" title="Banana" data-gallery="#blueimp-gallery-fruits"> 
     <img src="images/thumbnails/banana.jpg" alt="Banana"> 
    </a> 
    <a href="images/apple.jpg" title="Apple" data-gallery="#blueimp-gallery-fruits"> 
     <img src="images/thumbnails/apple.jpg" alt="Apple"> 
    </a> 
</div> 
<div id="vegetables"> 
    <a href="images/tomato.jpg" title="Tomato" data-gallery="#blueimp-gallery-vegetables"> 
     <img src="images/thumbnails/tomato.jpg" alt="Tomato"> 
    </a> 
    <a href="images/onion.jpg" title="Onion" data-gallery="#blueimp-gallery-vegetables"> 
     <img src="images/thumbnails/onion.jpg" alt="Onion"> 
    </a> 
</div> 

이것은 데이터 갤러리와 링크 속성 #의 blueimp 갤러리가 열립니다 : 비어 있지 않은 문자열로 데이터 갤러리 설정은 갤러리 이미지의 다른 세트로 그룹 링크 할 수 있습니다 - 과일 아이디 blueimp 갤러리 - 과일하고 데이터 갤러리와 링크 속성 # blueimp 갤러리 - 야채 갤러리 위젯의 ID 와 함께 갤러리 위젯 blueimp-gallery-vegetables.