라이트 박스 갤러리 연결하기

Question

lightbox gallery (3 개의 개별 갤러리)로 구현 된 3 개의 div가 있는데, 버튼을 클릭하면 트리거됩니다. div는 초기에 display:none으로 설정됩니다. 올바르게 작동하는 아래의 방법으로 버튼 클릭을 통해 div를 트리거하려고했습니다. 그러나 3 개의 갤러리가 모두 연결된 상태, 즉 열린 모달에서는 다른 div의 이미지가 표시됩니다. 무엇이 잘못되었을 수 있습니까?

스크립트

$('#button1').on('click', function() { 
     $('#div1').show(); 
    }); 
    $('#button2').on('click', function() { 
     $('#div2').show(); 
    }); 
    $('#button3').on('click', function() { 
     $('#div3').show(); 
    }); 

Answer 1

사용되는 데이터 갤러리 모든 상자 = "예를 갤러리".

like div1 boxes images should have data-gallery="example-gallery1" attribute. 
div2 boxes images should have data-gallery="example-gallery2" attribute. 
div3 boxes images should have data-gallery="example-gallery3" attribute. 

처럼이 :

data-gallery="example-gallery1" 
data-gallery="example-gallery2" 
data-gallery="example-gallery3" 

<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4"> 
       <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid"> 
      </a>