jQuery点击图片并显示div

Question

我现在正在进行图片切片展示以查看一些产品图片。

首先，我会看到一些小缩略图，点击缩略图，一个较大的图像将显示在另一个div中，默认显示img1的大图像。

然后，如果用户悬停在大图像上，光标图像将变成放大镜（zoomin.cur），如果用户点击大图像，另一个div（class =“detailview-container-bg）将显示在一切之上。在隐藏的div，小缩略图形式放置在顶部和一个大的图像会在下部显示，与IMG1作为默认显示。

到现在为止，我都拿出了首先点击缩略图显示一个更大的图像，然后我卡在变化的光标上，然后点击显示隐藏的div。我为第二次点击构建了一些jQuery，但它不包含错误，我不知道为什么不工作以显示div。

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

我已经完成了我的代码JSFiddle，请你给我一些想法。非常感谢你的时间...

Answer 1

你会想要使用适当的值来显示。 （例如，块http://learnlayout.com/display.html） 绝对值来自css属性“位置”

如果您调试代码，您会注意到display属性未使用绝对值进行更新。

Answer 2

是否有你必须自己编码的原因？这听起来像你在你的网站上寻找一个相当先进的画廊。

我可能会建议http://lokeshdhakar.com/projects/lightbox2/？

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

Answer 3

我添加了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(); 
 
    }); 
 
});