单击图像javascript使窗口显示出来

时间:2013-06-05 15:19:25

标签: javascript html gallery image

所以我有一系列的图像如下:

   <div id="gallery-top-picture"><img src= "images/IMG_1786.jpg" width="125" height="125" border="1"></div>
   <div id="gallery-top-picture"><img src= "images/IMG_2178.jpg" width="125" height="125" border="1"></div>
   <div id="gallery-top-picture"><img src= "images/IMG_2196.jpg" width="125" height="125" border="1"></div>
  </div>
   <div class="gallery-content">
   <div id= "gallery-bottom-picture"><img src="images/IMG_2214.jpg" width="125" height="125" border="1"></div>
   <div id="gallery-bottom-picture"><img src= "images/IMG_2273.jpg" width="125" height="125" border="1"></div>
   <div id="gallery-bottom-picture"><img src= "images/IMG_2274.jpg" width="125" height="125" border="1"></div>
   <div id="gallery-bottom-picture"><img src= "images/IMG_2277.jpg" width="125" height="125" border="1"></div>
   <div id="gallery-bottom-picture"><img src= "images/IMG_2280.jpg" width="125" height="125" border="1"></div>

我希望当我单击其中一个时,另一个虚拟窗口出现在当前的一个上面,只有我点击它的图像,有人可以告诉我如何在javascript上执行此操作吗?感谢。

3 个答案:

答案 0 :(得分:0)

尝试将此<a>链接标记添加到您的图片中:

<a href="javascript:void window.open('YOUR-IMAGE.jpg', 'width=WIDTH,height=HEIGHT,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0');">IMAGE HERE</a>

...例如:

<div id="gallery-top-picture">
    <a href="javascript:void window.open('images/IMG_1786.jpg', 'width=250,height=250,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0');">
        <img src= "images/IMG_1786.jpg" width="125" height="125" border="1"/>
    </a>
</div>

答案 1 :(得分:0)

试试这个

$("img").click(function(){
var src = $(this).attr("src");
window.open(src, "Image", "height=200,width=200");});

答案 2 :(得分:0)

你也可以这样做,只需根据自己的喜好自定义css。单击图像,然后单击背景将其恢复为正常。

http://jsfiddle.net/sanpopo/9SqjL/

onclick="expand(this);"

您只需在图片标记上使用此功能