0

在我的代码中，表格中有很多图像。我想点击一张照片，然后照片会在屏幕上以大尺寸弹出。但我对 javascript & jquery 不太了解。我尝试这样做，但问题是它弹出一个框但不显示图片。我知道在显示图片的脚本中存在问题。你能告诉我哪里错了，或者在点击后给我一个正确的弹出图像代码。

我的标题链接如下。是否需要添加任何其他链接？

    <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>

谁能帮助我如何在弹出框中显示图像。提前致谢。

4

3 回答 3

3

代替onclick属性，您可以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>

于 2016-06-15T14:57:48.513 回答
2

用以下任何尝试替换您的 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>

我假设图像显示正确，您将单击

于 2016-06-15T05:06:07.110 回答
1

我建议使用 Jack Moore 的 Colorbox。它使用 JQuery，并且非常可定制。

彩盒：http ://www.jacklmoore.com/colorbox/

演示：http ://www.jacklmoore.com/colorbox/example1/

如果您不反对使用 PHP，您可能还想查看 UberGallery。它在内部使用颜色框，可以简单地使用

<?php include_once('UberGallery.php') UberGallery::init()->createGallery("path to dir","name of gallery"); ?>

于 2016-06-15T05:08:31.173 回答