클릭하면 갤러리의 이미지를 표시하는 방법

Question

세 개의 미리보기 이미지를 표시하는 웹 페이지의 갤러리 탭을 만듭니다. 내 업적은 show-all이라는 클래스를 클릭하여 나머지 축소판을 표시하는 것입니다. 이를 위해 숨겨진 내용을 표시하기 위해 내 갤러리 높이에 애니메이션을 적용합니다. 기능에 따라 모든 것이 잘 어울립니다. 그러나 여기서 직면하는 문제는 내가 hide 축소판을 만들 때 overflow:hidden을 사용하여 갤러리의 height을 초과 할 때 내 두 번째 행 축소판의 일부를 볼 수 있습니다. 나는 그들을 단지 숨기고 싶다. 다음은

HTML 내 코드 블록이다

<div class="gallery"> 
    <h3>Photos</h3> 
<a class="see-all" href="javascript:void(0)">See All</a> 
    <div class="clear"></div> 
    <div class="row"> 
     <div class="col-xs-4"> 
      <div class="thumbnail"> 
       <img src="http://placekitten.com/g/150/150"> 
      </div> 
     </div> 
     <div class="col-xs-4"> 
      <div class="thumbnail"> 
       <img src="http://placekitten.com/g/150/150"> 
      </div> 
     </div> 
     <div class="col-xs-4"> 
      <div class="thumbnail"> 
       <img src="http://placekitten.com/g/150/150"> 
      </div> 
     </div> 
     <div class="col-xs-4"> 
      <div class="thumbnail"> 
       <img src="http://placekitten.com/g/150/150"> 
      </div> 
     </div> 
     <div class="col-xs-4"> 
      <div class="thumbnail"> 
       <img src="http://placekitten.com/g/150/150"> 
      </div> 
     </div> 
     <div class="col-xs-4"> 
      <div class="thumbnail"> 
       <img src="http://placekitten.com/g/150/150"> 
      </div> 
     </div> 
     <div class="col-xs-4"> 
      <div class="thumbnail"> 
       <img src="http://placekitten.com/g/150/150"> 
      </div> 
     </div> 
     <div class="col-xs-4"> 
      <div class="thumbnail"> 
       <img src="http://placekitten.com/g/150/150"> 
      </div> 
     </div> 
     <div class="col-xs-4"> 
      <div class="thumbnail"> 
       <img src="http://placekitten.com/g/150/150"> 
      </div> 
     </div> 
    </div> 
</div> 

jQuery를

$('.see-all').click(function(){ 
    $(this).parents('.gallery').animate({height: $(".gallery").get(0).scrollHeight}, 1000); 
}); 

어떤 도움을 주시면 감사하겠습니다.

DEMO

참고 : 내 이미지 크기 때문에 갤러리의 내 높이를 변경할 수 없습니다 항상과 동일하지 않습니다.

Answer 1

대신 갤러리 높이 조작에 의존, 그냥 처음 3 개 이미지를 표시하고 나머지는 숨길 수 있습니다 ... 이렇게하면 이미지 높이 등을 유지하는 데 방해가되지 않습니다.

see all을 클릭하면 나머지가 표시됩니다.

JS 빈 :

 $(document).ready(function(){ 
      var x = 0; 
      $('.row').children().each(function() { 
       if (x >= 3) { 
        $(this).hide(); 
       } 
       x++; 
      }); 
      $(".see-all").click(function(){ 
       $('.row').children().fadeIn('slow'); 
      }); 
     }); 

Answer 2

다음과 같이 할 수 있습니다. 첫 번째 3 개 요소에 클래스를 추가하고 표시되는 요소를 제외한 모든 축소판을 숨 깁니다. 그런 다음 JS는 다음과 같아야합니다

이

$('.see-all').click(function(){ 
    $(this).parents('.gallery').animate({height:'810px'}); 
    $('.thumbnail').show(); 
}); 

여기 예를 참조하십시오 http://jsfiddle.net/wvzyzLo1/1/이