php - 滚动到与单击的缩略图对应的图像的图像库

Question

我正在创建一个包含图片库的网站。

你有一个包含不同类别的侧边菜单，一个隐藏的 div，当你点击一个类别时出现，充满缩略图，当你点击任何缩略图时，它会隐藏缩略图 div 并在其中显示图片库地方。

这里有一个我正在尝试做的例子:http://www.matitacorp.com/web/portfolio.php

我想做的是当缩略图 div 隐藏并且图片库出现时，我还希望与单击的缩略图相对应的图像出现，即使它在可滚动缩略图库中低 3 或 4 张图片。

我试过使用 .scrolltop() 并设置值，但我认为我遗漏了一些东西。我的 div 显示正确，但我没有让 scrolltop 值起作用，或者我使用了完全错误的函数。希望有人能帮忙。

这是我尝试使用的一段代码:

//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); 
});