jQuery點擊圖片並顯示div

我現在正在進行圖片切片展示以查看一些產品圖片。jQuery點擊圖片並顯示div

首先，我會看到一些小縮略圖，點擊縮略圖，一個較大的圖像將顯示在另一個div中，默認顯示img1的大圖像。

然後，如果用戶懸停在大圖像上，光標圖像將變成放大鏡（zoomin.cur），如果用戶點擊大圖像，另一個div（class =「detailview-container-bg）將顯示在一切之上。在隱藏的div，小縮略圖形式放置在頂部和一個大的圖像會在下部顯示，與IMG1作爲默認顯示。

到現在爲止，我都拿出了首先點擊縮略圖顯示一個更大的圖像，然後我卡在變化的光標上，然後點擊顯示隱藏的div。我爲第二次點擊構建了一些jQuery，但它不包含錯誤，我不知道爲什麼不工作以顯示div。

 $(function(){ 
      $('#primaryImageDisplay').on("click",function(){ 
       $('#productSlide').css({'display':'absolute'}); 
      }); 
     })

我已經完成了我的代碼JSFiddle，請你給我一些想法。非常感謝你的時間...

來源

2017-01-23 Sammi

你會想要使用適當的值來顯示。（例如，塊http://learnlayout.com/display.html）絕對值來自css屬性「位置」

如果您調試代碼，您會注意到display屬性未使用絕對值進行更新。

來源

2017-01-23 15:20:36 Redlab

是的，抱歉，我沒有意識到這個愚蠢的錯誤....非常感謝您的提醒!!!!! – Sammi

沒問題，「從來沒有犯過錯誤的人從來沒有嘗試過任何新東西。」 - 阿爾伯特愛因斯坦 – Redlab

-1

是否有你必須自己編碼的原因？這聽起來像你在你的網站上尋找一個相當先進的畫廊。

我可能會建議http://lokeshdhakar.com/projects/lightbox2/？

它是一個很棒的工具，我用它在很多網站上。

來源

2017-01-23 15:15:08

感謝您的suggesution，但我需要它自己的代碼！ – Sammi

我添加了jquery的源代碼鏈接。您可以在某些文檔功能中使用所有這些操作。我在下面包含了一個示例。

您可以使用show（）/ hide（）或slideToggle（）方法而不是更改css。它在各種設備上顯示得更好，效果更好。

$(document).ready(function(){ 
 
    $('#desktopThumb1').on("click",function(){ 
 
    $('#primaryImageDisplay').attr("src","img1.jpg");}); 
 

 
    $('#desktopThumb2').on("click",function(){  
 
    $('#primaryImageDisplay').attr("src","img2.jpeg");}); 
 

 
    $('#desktopThumb3').on("click",function(){   \t \t \t   
 
    $('#primaryImageDisplay').attr("src","img3.jpeg");}); 
 

 
    $('#desktopThumb4').on("click",function(){ 
 
    $('#primaryImageDisplay').attr("src","img4.jpeg");}); 
 

 
    $("#primaryImageDisplay").click(function(){ 
 
    $("#productSlide").slideToggle(); 
 
    }); 
 
});

來源

2017-01-23 15:27:45

謝謝你的建議:) – Sammi

jQuery點擊圖片並顯示div

回答

相關問題