单击图像后如何在屏幕上弹出图像
how to popup image over the screen after clicking the image
在我的代码中,table 中有很多图像。我想单击一张照片,然后该照片会以大尺寸在屏幕上弹出。但是我对 javascript & jquery 不太了解。我尝试这样做,但问题是它弹出一个框但不显示图片。我知道脚本中存在显示图片的问题。你能告诉我哪里错了吗,或者给我一个正确的点击后弹出图片的代码。
我的 header link 在下面。是否需要添加任何其他 link??
<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:
<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>
任何人都可以帮助我如何在弹出框中显示图像。提前致谢。
将您的 jquery 替换为以下任何尝试:
<script type="text/javascript">
function popup() {
var image = $(this).attr('src');
w2popup.open({
title: 'Image',
body: '<div class="w2ui-centered"><img src="'+image+'"></img></div>'
});
}
</script>
我假设图片显示正确,你会点击
我推荐使用 Jack Moore 的 Colorbox。它使用 JQuery,并且非常可定制。
彩盒:http://www.jacklmoore.com/colorbox/
演示:http://www.jacklmoore.com/colorbox/example1/
如果您不反对使用 PHP,您可能还想看看 UberGallery。它在内部使用 colorbox 并且可以简单地与
一起使用
<?php include_once('UberGallery.php')
UberGallery::init()->createGallery("path to dir","name of gallery");
?>
代替 onclick
属性,您可以将 class popup_image
分配给您的 img,并在 DOM 准备就绪时附加点击处理程序。
我冒昧地删除了演示结果所不需要的脚本和标签。
$(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>
在我的代码中,table 中有很多图像。我想单击一张照片,然后该照片会以大尺寸在屏幕上弹出。但是我对 javascript & jquery 不太了解。我尝试这样做,但问题是它弹出一个框但不显示图片。我知道脚本中存在显示图片的问题。你能告诉我哪里错了吗,或者给我一个正确的点击后弹出图片的代码。
我的 header link 在下面。是否需要添加任何其他 link??
<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:
<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>
任何人都可以帮助我如何在弹出框中显示图像。提前致谢。
将您的 jquery 替换为以下任何尝试:
<script type="text/javascript">
function popup() {
var image = $(this).attr('src');
w2popup.open({
title: 'Image',
body: '<div class="w2ui-centered"><img src="'+image+'"></img></div>'
});
}
</script>
我假设图片显示正确,你会点击
我推荐使用 Jack Moore 的 Colorbox。它使用 JQuery,并且非常可定制。
彩盒:http://www.jacklmoore.com/colorbox/
演示:http://www.jacklmoore.com/colorbox/example1/
如果您不反对使用 PHP,您可能还想看看 UberGallery。它在内部使用 colorbox 并且可以简单地与
一起使用<?php include_once('UberGallery.php')
UberGallery::init()->createGallery("path to dir","name of gallery");
?>
代替 onclick
属性,您可以将 class popup_image
分配给您的 img,并在 DOM 准备就绪时附加点击处理程序。
我冒昧地删除了演示结果所不需要的脚本和标签。
$(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>