自己手写的一个图片预览模态框

　　　　思路:点击图片的时候获取所点击图片的url，最后将模态框中的图片的url换为获取到的url，即可实现单个图片的预览。

　　　　　　上一张，下一张的实现思路是:点击上一张，获取当前模态框中图片的名字，再到对应的div中找到此照片的原来的位置，获取到之后在其原来位置获取其父div的上一个和下一个div进行实现获取对应的url。

　　注意:一个图片占用一个div，且class名字相同，且图片的url不允许有相同的url。 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="JS/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <!--S   QLQ预览照片相关css     -->
    <style>
        .imageDiv{
            float: left;
            margin-left: 10px;
        }
        .deleteImgA{
            display: block;text-align: center
        }
        .priImg{
            height:140px;
            width:160px;
        }
    </style>
    <!--S   QLQ预览照片相关css     -->
</head>
<body>

<div id="imgBigDiv">
    <div class="box-body planePicture pictureDiv" id="pingmianDiv" style="margin-top:20px;">
        <!-- 存放之前已经选好的图片 -->
        <div id="pingmianPriviousDiv">
            <div class="imageDiv">
                 <img src="http://localhost/picture/0b6c3372f3fc4ebb884eb228f5d46364.png" class="priImg">
                 <a href="javascript:void(0)" class="deleteImgA">删除</a>
             </div >           <div class="imageDiv">
                 <img src="http://localhost/picture/0b06d1c5c12d4ae7aa171ed4c3fd8b09.png" class="priImg">
                 <a href="javascript:void(0)" class="deleteImgA">删除</a>
             </div >
            <div class="imageDiv">
                 <img src="http://localhost/picture/1a3e79a019844d5dab801005b9294896.png" class="priImg">
                 <a href="javascript:void(0)" class="deleteImgA">删除</a>
             </div>
        </div>
    </div>
</div>


<!-- S   预览照片模态框-->
<div class="modal fade" id="imgModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="box-body">
                      <span style="">
                          <img alt="" src="image/left.jpg" style="width:40px;height:60px;margin-bottom:40%" title="点击查看上一张" onclick="lastImg()">
                      </span>
                <span>
                         <img id="dynamicImage" src=""  style="width:83%;height:83%">
                     </span>
                <span style="">
                         <img alt="" src="image/right.jpg" style="width:40px;height:60px;margin-bottom:40%" title="点击查看下一张" onclick="nextImg()">
                       </span>
            </div><!-- /.box-body -->
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>
<!-- E   预览照片模态框-->



<script>
    //以前图片的点击事件:
    $(function () {
        //事件委托
        $('body').on('click','.priImg', function () {
            var src = $(this).prop("src");
            $("#dynamicImage").prop("src",src);
            $("#imgModal").modal("show");
        });
    })

    /************  S   预览图片的上一张下一张*******************/
    function lastImg(){
        var src = $("#dynamicImage").attr("src");
        var imgName = src.toString().substring(src.length-36);//获取图片名字
        var imgParent = $("#imgBigDiv").find("[src$='"+imgName+"']").parent();//获取到class为imageDiv的div
        var lastImageDiv = imgParent.prev("div");
        if(lastImageDiv.length == 0){
            alert("已经是第一张了");
        }else{
            $("#dynamicImage").prop("src",lastImageDiv.children("img").prop("src"));
        }
    }
    function nextImg(){
        var src = $("#dynamicImage").attr("src");
        var imgName = src.toString().substring(src.length-36);//获取图片名字
        var imgParent = $("#imgBigDiv").find("[src$='"+imgName+"']").parent();//获取到class为imageDiv的div
        var lastImageDiv = imgParent.next("div");
        if(lastImageDiv.length == 0){
            alert("已经是最后一张了");
        }else{
            $("#dynamicImage").prop("src",lastImageDiv.children("img").prop("src"));
        }
    }
    /************  E   预览图片的上一张下一张*******************/
</script>
</body>
</html>

 

 

效果:

 

posted @ 2018-02-09 14:43  QiaoZhi  阅读(1041)  评论(0)  编辑  收藏  举报