圖片庫滾動到與點擊縮略圖相對應的圖片

你有一個不同類別的側邊菜單，當你點擊一個類別時會出現一個隱藏的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>

謝謝！

來源

2012-11-07 bryankerk

我建議你先確認你的XHTML - 這是無效的。這裏真正的問題是什麼？ – m02ph3u5

我添加了一段代碼，是的，我看到我錯過了一個引號，並且沒有正確的HTML格式，它只是顯示我的內容。當您點擊div展臺中的縮略圖時，我會出現identityOverlay（此作品），但我也希望它可以滾動到identityOverlay的右側部分，具體取決於您點擊的縮略圖。我不知道如何將identityOverlay中的imageGallery div滾動到正確的部分。這可能嗎？我讀了關於scrollTop，並認爲我可以設置我的div的scrollTop屬性，但它不工作。 – bryankerk

您是否閱讀過jquery API手冊？使用scrollTo（）（基本JS）滾動到給定的x/y（或y/x）。 - 我在說的是scrollTop可能不符合你的想法：http://api.jquery.com/scrollTop/ – m02ph3u5

那麼你的代碼有幾個問題。

首先，您應該防止對點擊進行默認操作，其次您應該首先隱藏/顯示div，然後滾動到想要的位置。

下面是修改代碼：

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

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

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

來源

2012-11-13 08:13:16 rasmusx

圖片庫滾動到與點擊縮略圖相對應的圖片

回答

相關問題