单击图像可在小弹出窗口中显示较大的图像

Question

我正在尝试创建一个函数，用户可以点击一个图像，一个更大的将加载在一个小的弹出窗口。我已经在系统中有了较大的图像，所以它只需要加载图像，但在窗口中的大小是正确的！

你知道我怎样才能做到这一点吗？

谢谢。

Answer 1

您可能需要考虑使用多种js lightbox解决方案中的一种，例如http://leandrovieira.com/projects/jquery/lightbox/。

Answer 2

调查一下window.open。这将允许您打开一个指定高度和宽度的新窗口，您只需执行以下操作：

window.open("<?php echo $url; ?>", "_blank", 
            "height=<?php echo $height;?>  width=<?php echo $width; ?>")

您可以使用getimagesize在PHP中获取图像大小

Answer 3

I created a responsive javascript only lightbox (不需要jquery )，在这里你可以传递到大图的链接。所以你的缩略图应该是这样的，你的缩略图放在src属性中，指向大图的链接放在data-jslghtbx属性中：

<img class="jslghtbx-thmb" src="img/lightbox/thumbnail-picture.jpg" alt="" data-jslghtbx="img/big-picture.jpg">

您还可以通过data-jslghtbx-group属性使用图库函数来显示多个图片，但请确保通过display: none;隐藏所有图像元素(触发lightbox的缩略图除外)。请访问github for full documentation。希望这能有所帮助！