2012-02-22 2 views
1

는 I는 다음 갤러리 jQuery를에 설정 한 : - 썸네일 클릭시 rel 속성 값을 취하고에 삽입문제/갤러리

<script type="text/javascript"> 
    $(function() { 
     $(".image").click(function() { 
      var image = $(this).attr("rel"); 
      $('#galleryImage').hide(); 
      $('#galleryImage').fadeIn('slow'); 
      $('#galleryImage').html('<img src="' + image + '"/>'); 
      return false; 
     }); 
     $("#galleryImage").click(function() { 
      var imageLarge = $(this).attr("rel"); 
      $('#galleryImage').html('<a href="' + imageLarge + '"/>'); 
      $('#galleryImage a').lightBox(); 
     }); 
    }); 

<div id="galleryImage"> 

     <a href=""><img src="../../Images/Design/Gallery/HavellHouse/havellhouse-small1.jpg" width="337" height="223" alt="forbury court" /></a> 
</div> 

    <a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small1.jpg" class="image"> 
     <img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb1.jpg" class="thumb" border="0" /></a> 

    <a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small2.jpg" class="image"> 
     <img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb2.jpg" class="thumb" border="0" /></a> 

    <a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small3.jpg" class="image"> 
     <img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb3.jpg" class="thumb" border="0" /></a> 

galleryImage div는 사용자가 모두 한 곳에서 표시되는 축소판을 통해 다른 이미지를 선택할 수 있도록합니다.

이제 Lightbox를 #galleryImage div의 현재 이미지에 적용하면 사용자가 클릭하면 더 큰 버전이 라이트 박스 플러그인을 통해 표시되지만, 그것을하는 방법 주위에 머리, 이것이 내가 지금까지 가지고있는 것이다, 나는 바른 방향으로 향하고있다?

$(".image").click(function() { 
    var image = $(this).attr("rel"); 
    var imageLarge = $(this).attr("title"); 
    $("#galleryImage img").attr("src",image); 
    $("#galleryImage a").attr("href", imageLarge); 
    return false; 
} 

현재 선택된 썸네일에서 가져온 큰 이미지에 URL을 저장하는 제목 값을 사용하여 그냥 jQuery를의 속성 값을 설정하는 대신 HTML의 무리를 삽입 :

+0

도움을 받으십시오. – dtsg

답변

2

사용, 그것을 고정 div에 오른쪽