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

前台页面：

       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" target="_blank" rel="external nofollow"  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官网查找