单击图像后如何在屏幕上弹出图像 [英] how to popup image over the screen after clicking the image
问题描述
在我的代码中,表格中有很多图像。我想点击一张照片&然后照片将在屏幕上以大尺寸弹出。但我对javascript& amp; jQuery的。我尝试这样做,但问题是它弹出一个框但不显示图片。我知道脚本中有一个问题可以显示图片。你可以告诉我哪里出错了,或者点击后给我一个正确的弹出图片代码。
In my code, there is a lot of image in a table. I want to click a photo & then the photo will popup in a large size over the screen. But I do not have much idea about javascript & jquery. I try to do this but the problem is it popup a box but don't show the picture. I know that there is a problm in script to show the picture. can u please tell me where is the wrong or give me a proper code for popup image after click.
我的标题链接如下。是否需要添加任何其他链接??
my header link is below. is there need any other link to be added??
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" />
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script>
这里是html部分:
<div>
<td> <img class="btn" onclick="popup()" style="width:100px; height:100px; border-radius:4px;" src="upload/<?php echo $row['image'];?>"></img></td>
</div>
这里是javascript:
here is the javascript:
<script type="text/javascript">
function popup() {
w2popup.open({
title: 'Image',
body: '<div class="w2ui-centered"><img src="upload/<?php echo $row['image'];?>"></img></div>'
});
}
</script>
任何人都可以帮助我如何在弹出框中显示图像。提前谢谢。
can anyone please help me how to show image in the pop up box. thanks in advance.
推荐答案
而不是 onclick
属性,你可以将一个类 popup_image
分配给你的img,并在DOM准备就绪时附加一个点击处理程序。
Instead of the onclick
attribute, you could assign a class popup_image
to your img and attach a click handler when the DOM is ready.
我冒昧删除不需要演示结果的脚本和标签。
I took the liberty to remove scripts and tags that were not neccessary to demonstrate the result.
$(document).ready(function() {
$(".popup_image").on('click', function() {
w2popup.open({
title: 'Image',
body: '<div class="w2ui-centered"><img src="' + $(this).attr('src') + '"></img></div>'
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" />
<img class="btn popup_image" style="width:100px; height:100px; border-radius:4px;" src="http://lorempixel.com/g/200/200/"></img>
这篇关于单击图像后如何在屏幕上弹出图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!