2012-06-13 2 views
0

현재 Lightbox 2 (http://lokeshdhakar.com/projects/lightbox2/)를 사용하고 있습니다.이 모든 것이 정상적으로 작동하지만 약간의 조정이 필요합니다.Lightbox2 - 여러 이미지, 한 번 클릭

미리보기 이미지를 클릭하면 모든 이미지가 세로로 표시됩니다. 따라서 3 개의 이미지가 모두 같은 rel = "lightbox [무엇이든]"을 사용하면 모두 출력해야합니다. 나는 다음과 이전 버튼으로 "이미지 1/5"를 원하지 않는다.

나는 모든 것을 조사하고 해결책을 찾지 못했습니다. 누군가 아이디어, 스 니펫 또는 외부 URL을 가지고 있다면 큰 도움이됩니다.

코드 예 :

<a href="resources/images/ClassicCarriers/ClassicCarriers1.jpg" rel="lightbox[classicCarriers]" title=""> 
    <img src="Resources/Images/classicCarriers_grey.jpg" class="recentWork" title="Classic Carriers" alt="Classic Carriers"/> 
</a> 
<a href="resources/images/ClassicCarriers/ClassicCarriers2.jpg" rel="lightbox[classicCarriers]" title=""></a> 
<a href="resources/images/ClassicCarriers/ClassicCarriers3.jpg" rel="lightbox[classicCarriers]" title=""></a> 

답변

0

http://www.jacklmoore.com/colorbox을 사용하여 원하는 것을 얻을 수도 있습니다. 다음 코드

HTML

<div id="container"> 
    <img src="http://placekitten.com/100/100" width="100px"> 
    <img src="http://placekitten.com/100/100" width="100px"> 
    <img src="http://placekitten.com/100/100" width="100px"> 
</div> 

jQuery를

$(function(){ 
    $('#container img').click(function(e){ 
     e.preventDefault(); 
     $.colorbox({ 
     href: '#container', 
     inline: true 
    });  

    }); 
}); 

당신이 이미지 3의를 클릭하면 이제 colorbox에 표시됩니다 확인하십시오.

Working Fiddle

난 그냥 내가 볼 라이트 박스에 클릭에 다음 1 썸네일을보고 싶어
+0

큰 image1에 2, 3 – balexander

+0

확인이 http://jsfiddle.net/joycse06/E5Eft/3/ –

+0

거의 다! 페이지에 약 10 개의 미리보기 이미지가 있습니다. 각각의 기능을 복제하지 않고도 모든 작업을 수행 할 수있는 방법이 필요합니다. rel = ""을 사용할 수 있습니까? 내 JS 그래서 끔찍한 사과드립니다. – balexander

0

fancy box을보십시오. 효과를 이미지에 직접 첨부하는 대신 3 개의 이미지가 포함 된 HTML에 첨부하십시오.