클릭 한 미리보기 이미지에 해당하는 이미지로 스크롤하는 이미지 갤러리

Question

이미지 갤러리가있는 웹 사이트를 만들고 있습니다.

다른 카테고리의 사이드 메뉴, 카테고리를 클릭 할 때 표시되는 숨겨진 div, 미리보기 이미지로 채워진 이미지, 미리보기 이미지 중 하나를 클릭하면 미리보기 이미지 div가 숨겨지고 이미지 갤러리가 표시됩니다. 그 장소.

내가 뭘하려고 오전의 예는 여기에 있습니다 : 썸네일 사업부의 가죽 및 이미지 갤러리 나는 또한 축소판에 해당하는 이미지처럼 클릭 할 나타날 때 내가하고 싶은 무엇 http://www.matitacorp.com/web/portfolio.php

입니다 스크롤 할 수있는 축소판 갤러리에서 3 또는 4 개의 그림이 더 낮아도 표시됩니다.

.scrolltop()을 사용하고 값을 설정하려고 시도했지만 뭔가가 누락되었다고 생각합니다. 내 div의 제대로 나타납니다 있지만 작동하도록 스크롤 값을 가져 오지 않을 또는 전체 잘못된 함수를 사용하고 있습니다. 희망을 갖고 누군가가 도와 줄 수 있기를 바랍니다.

//thumbnail section 
<div id="booth">  
    <a href="#" id="identityoverlay"><img src="thumb1" alt="" /></a> 
    <a href="#" id="identityoverlayA"><img src="thumb2" alt="" /></a> 
    <a href="#" id="identityoverlayB"><img src="thumb3" alt="" /></a> 
</div> 

//main image section 
<div id="identityOverlay" style="background-image:url(images/bkgrnd_700.gif); height:720px; display:none;">    

    <div id="imageGallery style="padding-left:95px; padding-top:10px; padding-bottom:15px; overflow:auto; height:610px;">    
       <img src="mainImg1" /><br />    
       <img src="mainImg2" /><br />    
       <img src="mainImg3" /><br />    
    </div> 
</div> 

<script> 
    $("#identityoverlay").click(function() { 
     $("#identityOverlay").show();  
     $("#booth").hide(); 
});  

    $("#identityoverlayA").click(function() {  
     var myCont = document.getElementById ("imageGallery"); 
       myCont.scrollTop(100); 

     $("#identityOverlay").show();  
     $("#booth").hide(); 
}); 
</script> 

감사 : 여기

내가 사용하려고하고있는 코드 조각입니다!

Answer 1

글쎄 코드에 몇 가지 문제점이 있습니다.

먼저 기본 동작을 금지해야하며 둘째로 div를 먼저 표시하고 원하는 위치로 스크롤해야합니다. 여기

수정 된 코드입니다 :

$("#identityoverlayA").click(function (e) { 
    e.preventDefault; 

    $("#booth").hide(); 
    $("#identityOverlay").show();  

    var myCont = document.getElementById ("imageGallery"); 
    myCont.scrollTop(100); 
});