[jQuery] 이미지 레이어 팝업, 슬라이드 (Lightbox plugin)

사용자가 링크를 클릭하면 해당 이미지가 Lightbox 팝업으로 표시되며, 해당 이미지가 속한 갤러리의 다른 이미지들도 이전/다음(슬라이드) 버튼을 통해 탐색할 수 있습니다. 
data-lightbox 속성을 통해서 이미지를 그룹화하여 관련 이미지들을 함께 표시하고 있습니다. 속성값이 동일하면 팝업에서 슬라이드를 통해 이동할 수 있습니다.

 

 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js" /></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
<div>
<a href="food1.jpg" data-lightbox="food-gallery" style="text-decoration:underline;">음식 이미지</a>
<a href="food2.png" data-lightbox="food-gallery" style="display: none;"></a>
</div>
<div>
<a href="img1.jpg" data-lightbox="nature-gallery" style="text-decoration:underline;">자연 이미지</a>
<a href="img2.jpg" data-lightbox="nature-gallery" style="display: none;"></a>
<a href="img3.jpg" data-lightbox="nature-gallery" style="display: none;"></a>
<a href="img4.jpg" data-lightbox="nature-gallery" style="display: none;"></a>
</div>
<div>
<a href="test.png" data-lightbox="test-gallery" style="text-decoration:underline;">테스트 이미지</a>
</div>