jQuery 라이트 박스를 하나의 링크에서 여러 이미지로 열려면 어떻게합니까?

Question

ColorBox 또는 jQuery Lightbox Plugin과 같은 라이트 박스를 사용하면 갤러리/이미지 배열을 여는 단일 링크를 어떻게 만듭니 까?

예를 들어 1 개의 미리보기 이미지가 있고 사용자가 그것을 클릭하면 라이트 박스에서 여러 사진을 열어서 다음 또는 이전을 클릭하여 해당 갤러리 내의 모든 사진을 볼 수 있습니다.

제 생각에 저는 정상적인 1 개의 그림으로 링크를 한 다음 jquery를 사용하여 첫 번째 링크를 숨기려고했습니다. 더 좋은 방법이있을거야?

감사합니다.

Answer 1

용액 적절한 (보다 효율적)이다

HTML :

<div id='gallery'> 
    <a href="images/big-image1.jpg"> 
     <img src="images/thumbnail-image1.jpg"/> 
    </a> 
    <a href="images/big-image2.jpg" ></a> 
    <a href="images/big-image3.jpg" ></a> 
    <a href="images/big-image4.jpg" ></a> 
</div> 

jQuery를/JS :

$(document).ready(function() { 
    $('#gallery a').lightBox(); 
}); 

참고 : 보시다시피, 갤러리에서 분리하려는 다른 이미지에 대한 앵커 링크를 나열하면됩니다. 마크 업에 이미지를 추가 한 다음 JS로 숨길 필요가 없습니다. 위의 마크 업 예에서 볼 수있는 유일한 이미지는 입니다. images/thumbnail-image1.jpg 라이트 박스는 자동으로 나머지 부분을 숨기고 적절한 시간에 각각 표시합니다.

Answer 2

오해의 소지가 있지만, ColorBox에서 제공하는 "그룹화 된 사진"스타일 갤러리 이상의 것을하고 싶다는 인상을 받고 있습니다. 나는 당신이 묘사하고있는 다음/이전 기능에 대해서는 확신 할 수 없지만 처음에는 ColorBox없이이 기능을 작성하는 것이 좋을 것입니다.

페이지 내의 일반 div에보기 갤러리를 추가하십시오. 갤러리와 그 동작을 원하는대로 설정하면 div에서 ColorBox 인라인을 호출하여 팝업 내에서 새로 만든 컨트롤을 표시 할 수 있습니다. jQuery를 라이트 박스 플러그인을 사용하여

Answer 3

는 예제 코드는 다음과 같이 말한다 :

$(document).ready(function() { 
    $('#gallery a').lightBox({fixedNavigation:true}); 
    $('#gallery a:gt(0)').hide(); 
}); 

모든 링크가 라이트 박스를 열고이 갤러리를 탐색 할 수있는 다음/돌아 가기 링크를해야합니다 그. 그게 당신이 찾고있는거야?

는 (예 여기 있습니다 : http://leandrovieira.com/projects/jquery/lightbox/#example)

여기

Answer 4

다른 플러그인을 사용하고 싶을 것 같은데요. PrettyPhoto은 갤러리에게 좋습니다. .

Answer 5

<a href="../gallery/renos/logo.jpg" rel="lightbox[renovation]"></a> 

그래서 : 그런 다음 추가 할 수

rel="lightbox[renovation]"