Jan200916

dKeN

Study·学习

2 评论

Lytebox-功能强大的LightBox效果

本文出自：http://aijun.org/?action=show&id=515

Lytebox不仅能支持图像展示，还比lightbox2多了“自动播放图像”的功能，当然最主要的是lytebox支持弹出网页的效果。

Lytebox最新的版本为v3.22 http://dolem.com/lytebox/

使用方法是：

1、下载 Lytebox v3.22的源码及相关图像素材

点击下载：lytebox_v3.22.zip

2、把如下代码拷贝到网页的<head>...</head>之间

  1. <script type="text/javascript" language="javascript" src="lytebox.js"></script>  
  2. <link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />  

3、就是应用Lytebox了

a、对于图像应用而言，Lytebox提供了三种方案，即：单张图像的显示，多张图像的翻页显示和多种图像以自动播放的幻灯式显示。

分别在超级连接中以 rel="lytebox" 、 rel="lytebox[vacation]" 和 rel="lyteshow[vacation]" 来表示。

  1. <html> 
  2. <head> 
  3. <title>lytebox demo</title> 
  4. <script type="text/javascript" language="javascript" src="/lytebox/lytebox.js"></script> 
  5. <link rel="stylesheet" href="/lytebox/lytebox.css" type="text/css" media="screen" /> 
  6. </head> 
  7. <body> 
  8. <div> 
  9. <h2>单独图像显示，图像打开后之间没有链接翻页浏览：rel="lytebox"</h2> 
  10. <a href="http://www.aijun.org/upload/zm/zm01.jpg" rel="lytebox" title="zm01.jpg">zm01.jpg</a> 
  11. <a href="http://www.aijun.org/upload/zm/zm02.jpg" rel="lytebox" title="zm02.jpg">zm02.jpg</a> 
  12. </div> 
  13.  
  14. <div> 
  15. <h2>一系列图像打开后，鼠标移动至图像左侧或右侧进行图像的切换浏览：rel="lytebox[vacation]"</h2> 
  16. <a href="http://www.aijun.org/upload/zm/zm03.jpg" rel="lytebox[vacation]" title="zm03.jpg">zm03.jpg</a> 
  17. <a href="http://www.aijun.org/upload/zm/zm04.jpg" rel="lytebox[vacation]" title="zm04.jpg">zm04.jpg</a> 
  18. <a href="http://www.aijun.org/upload/zm/zm05.jpg" rel="lytebox[vacation]" title="zm05.jpg">zm05.jpg</a> 
  19. </div> 
  20.  
  21. <div> 
  22. <h2>一系列图像打开后，不仅能进行图像的切换浏览，lytebox还允许了自动播放的功能：rel="lyteshow[vacation]"</h2> 
  23. <a href="http://www.aijun.org/upload/zm/zm06.jpg" rel="lyteshow[vacation]" title="zm06.jpg">zm06.jpg</a> 
  24. <a href="http://www.aijun.org/upload/zm/zm07.jpg" rel="lyteshow[vacation]" title="zm07.jpg">zm07.jpg</a> 
  25. <a href="http://www.aijun.org/upload/zm/zm08.jpg" rel="lyteshow[vacation]" title="zm08.jpg">zm08.jpg</a> 
  26. </div> 
  27.  
  28. </body> 
  29. </html> 

b、对于网页应用而言，Lytebox提供了两种方案，即：单页面和可以翻页的多页面效果。

分别在超级链接中用 rel="lyteframe" 和 rel="lyteframe[catalog]" 来表示

其中还可以定义窗口大小和滚动条的显示状况 rev="width: 400px; height: 300px; scrolling: no;"

  1. <html> 
  2. <head> 
  3. <title>lytebox demo</title> 
  4. <script type="text/javascript" language="javascript" src="/lytebox/lytebox.js"></script> 
  5. <link rel="stylesheet" href="/lytebox/lytebox.css" type="text/css" media="screen" /> 
  6. </head> 
  7. <body> 
  8. <div> 
  9. <h2>单页面效果，打开后之间没有链接翻页浏览：rel="lyteframe"</h2> 
  10. <a href="http://www.aijun.org" rel="lyteframe" title="萌爸的快乐生活" rev="width: 900px; height: 300px; scrolling: no;">萌爸的快乐生活</a> 
  11. <a href="http://www.qiner.org" rel="lyteframe" title="一缕阳光的博客" rev="width: 700px; height: 300px; scrolling: no;">一缕阳光的博客</a> 
  12. </div> 
  13.  
  14. <div> 
  15. <h2>多页面效果，打开后之间可通过左下角的链接翻页浏览：rel="lyteframe[catalog]"</h2> 
  16. <a href="http://www.zimeng.org" rel="lyteframe[catalog]" title="快乐宝宝梓萌" rev="width: 800px; height: 500px; scrolling: no;">zimeng</a> 
  17. <a href="http://www.aijun.org" rel="lyteframe[catalog]" title="萌爸的快乐生活" rev="width: 100px; height: 400px; scrolling: no;">aijun</a> 
  18. <a href="http://www.qiner.org" rel="lyteframe[catalog]" title="一缕阳光的博客" rev="width: 700px; height: 500px; scrolling: no;">qiner</a> 
  19. </div> 
  20.  
  21. </body> 
  22. </html> 

4、如果把lytebox.css和lytebox.js及[images]所有文件存放的目录导致应用了lytebox效果的页面显示不了图像，即修改lytebox.css中的相关background: url

标签：lytebox, lightbox

« 上一篇 | 下一篇 »

引用地址：

  • 点击获得Trackback地址,Encode: UTF-8
  • 点击获得Trackback地址,Encode: GB2312 or GBK
  • 点击获得Trackback地址,Encode: BIG5

» 我要发表评论访客评论：(现有 2 条评论)

  1. Gravatar
    1楼 yy on 2009, February 23, 4:41 PM Says:
    点击引用该评论回复
    这个不错，更待整合进SABLOG-X程序里，那就更完美了
  2. Gravatar
    2楼 宠物兔 on 2010, May 31, 9:29 AM Says:
    点击引用该评论回复
    参考价值很大，谢谢分享！

发表评论：( 现在流行评论作者超链接 rel="nofollow"）