duandeng1824 2018-03-28 14:12
浏览 82
已采纳

在单个bootstrap模式上显示图像

I am working on a task where I want few images and I want to display image in bootstrap modal.

I have done below code to to display image on modal on click of link, where link has below images. Each image have link.

Modal is opening with all the images, but issue is I don't want to create modal for each image.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>Image Demo</title>

        <link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>

    <body>
        <div class="container-fluid">
            <?php
            $images = ['image_1.png', 'image_2.png', 'image_3.png', 'image_4.png', 'image_5.png'];
            for ($cnt = 0; $cnt < count($images); $cnt++) {
                ?>
                <a href="#imagemodal_<?= $cnt ?>" data-toggle="modal" data-target="#imagemodal_<?= $cnt ?>">
                    <img src="images/<?php echo $images[$cnt] ?>" width="100px" height="100px"/>
                </a>
                <div class="modal fade " id="imagemodal_<?= $cnt ?>" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-sm">
                        <div class="modal-content">
                            <img src="images/<?php echo $images[$cnt] ?>" width="100px" height="100px"/>
                        </div>
                    </div>
                </div>
                <?php
            }
            ?>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>
    </body>
</html>

How can I achieve this ?

  • 写回答

3条回答 默认 最新

  • douchen5971 2018-03-28 14:34
    关注

    What you have to do is generating you image thumbs using php , and create your modal which has an empty image tag (add custom class to access it with jquery ) outside the loop then using jquery

    just create script which get the link from clicked image and set the src of the image tag inisde the modal ,

    your php code should look like :

    <?php
        $images = ['image_1.png', 'image_2.png', 'image_3.png', 'image_4.png', 'image_5.png'];
        for ($cnt = 0; $cnt < count($images); $cnt++) {
            ?>
            <a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">
                <img src="images/<?php echo $images[$cnt] ?>" width="100px" height="100px"/>
            </a>

            <?php
        }
        ?>
            <div class="modal fade " id="imagemodal" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <img class="modal-content" src="" width="100px" height="100px"/>
                    </div>
                </div>
            </div>

    see below working snippet :

    $(function(){
  $("#image img").on("click",function(){
     var src = $(this).attr("src");
     $(".modal-img").prop("src",src);
  })
})
    .modal-img {
  width:100%;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

  <div id="image">
    <a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">
        <img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" width="100px" height="100px"/>
    </a>
    <a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">
        <img src="http://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" width="100px" height="100px"/>
    </a>
    <a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">
        <img src="https://i2.wp.com/thenewcamera.com/wp-content/uploads/2015/08/Nikon-200-500mm-sample-img4.jpg?resize=750%2C502" width="100px" height="100px"/>
    </a>
    <a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">
        <img src="https://i1.wp.com/thenewcamera.com/wp-content/uploads/2015/08/Nikon-200-500mm-sample-img2.jpg?resize=750%2C502" width="100px" height="100px"/>
    </a>
 <div>   
    <div class="modal fade " id="imagemodal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <img class="modal-img" />
            </div>
        </div>
    </div>

    </div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 (标签-UDP|关键词-client)
  • ¥15 关于库卡officelite无法与虚拟机通讯的问题
  • ¥15 qgcomp混合物线性模型分析的代码出现错误：Model aliasing occurred
  • ¥100 已有python代码，要求做成可执行程序，程序设计内容不多
  • ¥15 目标检测项目无法读取视频
  • ¥15 GEO datasets中基因芯片数据仅仅提供了normalized signal如何进行差异分析
  • ¥15 小红薯封设备能解决的来
  • ¥100 求采集电商背景音乐的方法
  • ¥15 数学建模竞赛求指导帮助
  • ¥15 STM32控制MAX7219问题求解答