LightboxV2.51基础

 

Lightbox简介

1. 基于jQuery的图片对话框

 

正文

　　主要包括两部分：引用、分组。

• 引用

    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    
    <link href="css/lightbox.css" rel="stylesheet" type="text/css"/>
    <script src="js/lightbox.js" type="text/javascript"></script>

　　　　官网地址：http://lokeshdhakar.com/projects/lightbox2/

　　　　下载地址：http://lokeshdhakar.com/projects/lightbox2/releases/lightbox2.51.zip

　　

• 分组

　　　　包括分为两类： 单个分组和多个分组。区别在于<a>的rel属性分别为linghtbox和linghtbox[分组名]。

　　　　方式1：

<h3>Single image</h3>
  <div class="imageRow">
      <div class="single">
          <a href="images/examples/image-1.jpg" rel="lightbox"><img src="images/examples/thumb-1.jpg" alt="" /></a>
      </div>
      <div class="single">
          <a href="images/examples/image-2.jpg" rel="lightbox" title="Optional caption."><img src="images/examples/thumb-2.jpg" alt="" /></a>
      </div>
  </div>

　　　　方式2：

<h3 style="clear: both;">Image set</h3>

  <div class="imageRow">
      <div class="set">
        <div class="single first">
            <a href="images/examples/image-3.jpg" rel="lightbox[plants]" title="Click on the right side of the image to move forward."><img src="images/examples/thumb-3.jpg" alt="Plants: image 1 0f 4 thumb" /></a>
          </div>
      <div class="single">
            <a href="images/examples/image-4.jpg" rel="lightbox[plants]" title="Alternately you can press the right arrow key." ><img src="images/examples/thumb-4.jpg" alt="Plants: image 2 0f 4 thumb" /></a>
      </div>
      <div class="single">
            <a href="images/examples/image-5.jpg" rel="lightbox[plants]" title="The script preloads the next image in the set as you're viewing."><img src="images/examples/thumb-5.jpg" alt="Plants: image 3 0f 4 thumb" /></a>
      </div>
      <div class="single last">
            <a href="images/examples/image-6.jpg" rel="lightbox[plants]" title="Click the X or anywhere outside the image to close"><img src="images/examples/thumb-6.jpg" alt="Plants: image 4 0f 4 thumb" /></a>
      </div>
      </div>
  </div>

 

• 其他

　　　　1. 显示效果

　　　　2. 在弹出对话框中拓展交互，如添加点击下载选项

<a href="images/examples/image-1.jpg" rel="lightbox" 
title="my caption 
&lt;a href=&quot;images/examples/image-1.jpg&quot; onClick=&quot;alert(0)&quot;&gt;my link&lt;/a&gt;"
>显示内容</a>

　　　　3. 在网页高度低于浏览器高度时，弹出对话框之后，页面可能在水平方向拓展

　　　　　　解决方案： 修改lightbox.css文件， #lightboxOverlay中position值由absolute改为fixed。

　　　　　　原#lightboxOverlay内容：

#lightboxOverlay {
  position: absolute; 
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
  opacity: 0.85;
  display: none;
}

• 参考

　　　　http://www.zhangxinxu.com/jq/balupton_zh/demo/　　　　

　　　　http://www.zhangxinxu.com/jq/balupton_zh/

　　　　http://ce.sysu.edu.cn/cmsdesign/2009/teachingprogram/ShowArticle.asp?ArticleID=35

 

　　　　我与横刀向天笑，去留肝胆两昆仑。