Jquery 图片弹出窗口
Jquery popup for images
单个 html 页面中有三张或更多图片,需要在点击特定图片后在弹出窗口中显示相同的图片。有什么我可以用的吗?
<img class="wp-image-4596 size-medium" src="img1.jpg" alt="img1" width="232" height="300">
<img class="wp-image-4596 size-medium" src="img2.jpg" alt="img2" width="232" height="300">
<img class="wp-image-4596 size-medium" src="img3.jpg" alt="img3" width="232" height="300">
您可以使用 bootstrap 模式来完成。检查 我的答案。
您可以在 javascript 中通过在图像上添加 onclick 函数来实现
$('.wp-image-4596').click(function(){
$('#popupimage').attr('src', $(this).attr('src'));
});
<img class="wp-image-4596 size-medium" src="img1.jpg" alt="img1" width="232" height="300">
<img class="wp-image-4596 size-medium" src="img2.jpg" alt="img2" width="232" height="300">
<img class="wp-image-4596 size-medium" src="img3.jpg" alt="img3" width="232" height="300">
<div id="popup"><!--this is your pop for example-->
<img src='' id="popupimage">
</div>
这将获取点击图像的来源并将其用作弹出图像的来源
嘿伙计,使用 lightbox2 jQuery 插件,这有很酷的效果和功能。
如果你喜欢使用更简单的插件,那么你可以使用 magnafic 弹出插件。
单个 html 页面中有三张或更多图片,需要在点击特定图片后在弹出窗口中显示相同的图片。有什么我可以用的吗?
<img class="wp-image-4596 size-medium" src="img1.jpg" alt="img1" width="232" height="300">
<img class="wp-image-4596 size-medium" src="img2.jpg" alt="img2" width="232" height="300">
<img class="wp-image-4596 size-medium" src="img3.jpg" alt="img3" width="232" height="300">
您可以使用 bootstrap 模式来完成。检查
您可以在 javascript 中通过在图像上添加 onclick 函数来实现
$('.wp-image-4596').click(function(){
$('#popupimage').attr('src', $(this).attr('src'));
});
<img class="wp-image-4596 size-medium" src="img1.jpg" alt="img1" width="232" height="300">
<img class="wp-image-4596 size-medium" src="img2.jpg" alt="img2" width="232" height="300">
<img class="wp-image-4596 size-medium" src="img3.jpg" alt="img3" width="232" height="300">
<div id="popup"><!--this is your pop for example-->
<img src='' id="popupimage">
</div>
这将获取点击图像的来源并将其用作弹出图像的来源
嘿伙计,使用 lightbox2 jQuery 插件,这有很酷的效果和功能。
如果你喜欢使用更简单的插件,那么你可以使用 magnafic 弹出插件。