jQuery插件jbgallery实现全页展示图片并自定义类似flash插放

jQuery插件jbgallery可实现超大图片全页展示功能，可自动播放，控制播放图片等，支持单图片、多图片、多图库、阴影、网站背景色以及 对话模式等。jbgallery有两个基本菜单，一个类似音乐播放按钮和一个直接链接单图片播放按钮，同时提供公共API接口去除播放控制组件，以便扩展 任意自定义播放控制按钮，jbgallery插件功能强大，而且使用简单，效果图如下：

查看jbgallery官方在线演示

[无css样式效果]

jbgallery支持浏览器
Firefox 3 (winxp/linux)
Safari 3.2, 4 (winxp)
Chrome 1/2 (winxp)
Opera 9.6/10 (winxp/linux)
Internet Explorer 6/7/8 (winxp)
Konqueror 4.2.1 (linux)

使用说明

需要使用jQuery库文件和jbgallery库文件
可自定义图片和播放控制按钮样式

使用实例
一，包含文件部分

1. <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
2. <script type="text/javascript" src="jbgallery-1.0.min.js"></script>
3. <link type="text/css" rel="stylesheet" href="jbgallery.css"/>

使用jQuery1.3.2和jbgallery-1.0版本

二，HTML部分

1. <div class="jbgallery">
2. <ul>
3. <li><a href="1.png" title="alternative text">1</a></li>
4. <li><a href="2.png" title="alternative text">2</a></li>
5. <li><a href="3.png" title="alternative text">3</a></li>
6. <li><a href="4.png" title="alternative text">4</a></li>
7. <!-- etc -->
8. </ul>
9. </div>

图片包含在ID为jbgallery的层中，并使用ul li的格式。

三，javascript部分

1. <script type="text/javascript">
2. <!--
3. jQuery(document).ready(function(){
4. jQuery(".jbgallery").jbgallery();
5. });
6. //-->
7. </script>

直接调用jbgallery函数

如上实例，就可以实现了一个强大的图片展示类似flash插放功能。

四，jQuery插件jbgallery参数清单

1. style     :  "zoom", 显示分格，可选"centered"和"zoom"
2. slideshow :  false, 是否使用阴影效果
3. menu      :  "simple",  菜单形式，可选false，"numbers", "simple"
4. interval  :  4000, 图片显示间隔
5. fade      :  false, 是否使用褪色效果
6. fade_time :  400, 褪色效果持续时间
7. shortcuts :  [37,39],  快捷键left and right arrows
8. before    :  function(){} 开始调用的函数
9. load      :  function(ev){},加载调用的函数
10. after     :  function(ev){},结束调用的函数
11. popup        :  false,是否使用弹出框
12. close        :  function(ev){},关闭调用的函数
13. labels    :  {  标签
14. play : "play", 播放开始
15. next : "next", 播放下一张
16. prev : "prev", 播放上一张
17. stop : "stop", 播放停止
18. close: "close" 播放关闭

五，jQuery插件jbgallery API接口

1. jQuery("#jbgallery").jbgallery();
2. jQuery("#jbgallery").jbgallery("go" , 2);
3. jQuery("#jbgallery").jbgallery("left");
4. jQuery("#jbgallery").jbgallery("right");
5. jQuery("#jbgallery").jbgallery("play");
6. jQuery("#jbgallery").jbgallery("stop");
7. jQuery("#jbgallery").jbgallery("destroy");
8. jQuery("#jbgallery").jbgallery("current");

图片效果展示一般都是在一个很小的窗口中，像这种全页面展示并自定义播放的插件还是很难得的，可实现丰富的图片展示效果，值得推荐。