lightBox实现点击图片放大查看的实现方法

来源：互联网发布：视频剪辑合并软件编辑：程序博客网时间：2024/04/29 21:45

前台页面：

JS和CSS的引用：

    <script type=""<script type="text/javascript" src="../js/jquery-1.7.min.js"></script>    <script type="text/javascript" src="../js/LightBox/jquery.lightbox-0.5.min.js"></script>    <link href="../js/LightBox/jquery.lightbox-0.5.css" rel="stylesheet" />    <script type="text/javascript" src="../js/myImgScroll/jquery.slideBox.js"></script>

    <script type="text/javascript" charset="utf-8">        $(function ($) {            $('#scroll1 a').lightBox();            $('#scroll1 a').lightBox({                imageLoading: '../js/lightbox/images/lightbox-ico-loading.gif',//设置下载图片                imageBtnPrev: '../js/lightbox/images/lightbox-btn-prev.gif',//设置上一页按钮的图片地址                imageBtnNext: '../js/lightbox/images/lightbox-btn-next.gif',//设置下一页按钮的图片地址                imageBtnClose: '../js/lightbox/images/lightbox-btn-close.gif',//设置关闭按钮的图片地址            });         });     </script>          <style type="text/css">        .items li        {            float: left;        }            .items li img            {                border: 1px dashed #41bfde;                margin: 2px;                padding: 3px;            }        a        {            outline: none;        }    </style>

HTML：

    <div style="width:500px; height: 300px; overflow-x:scroll;overflow-y:hidden;">       <div style="width: 9999px" id="scroll1">           <ul class="items">              <%=GetImg %>           </ul>       </div>    </div>

后台代码：

  string strUrls = ImgUrls;   //ImgUrls为各个图片的url地址组成的字符串,字符串以竖线(|)进行分割；            if (strUrls.LastIndexOf('|') == strUrls.Length - 1)  {      strUrls = strUrls.Substring(0, strUrls.Length - 1);  }  string[] Urls = strUrls.Split('|');  for (int i = 0; i < Urls.Length; i++)  {  // "../UploadFile/" 是图片所在的文件夹                  GetImg += "<li><a href='../UploadFile/" + ImgUrls[i] + "'>";     GetImg += "<img alt='图片' width='220px' height='250px'   src='../UploadFile/" + Urls[i] + "' /></a></li>";  }

说明：所用js或css文件没有上传，可以去LightBox官网查找

0 0