必优博客

本博客所有文章均属原创作品，如有转载，请注明作者：biuuu，来源：http://www.biuuu.com/?p=525

图片特效一直是设计师和程序员永远不变的话题，经常需要制作各种各样的图片效果，以提高对用户的视觉冲击力，扩展网站的功能,上期在[jQuery插件ImageFlyout弹出图片实现javascript放大图片功能]和[jQuery插件Step Carousel Viewer实现Javascript图片滑动旋转效果]分别介绍了两种使用jQuery插件实现的图片特效，这里介绍另外一个jQuery插件piroBox弹出图片盒实现Javascript新窗口全屏图片展示功能，点击任意图片将弹出一个全屏窗口图片库，其它图片可根椐上下按钮控制播放，轻松实现个人相册和产品展示特效，jQuery插件piroBox弹出图片盒效果图如下：

使用说明
需要使用jQuery库文件(目前版本1.3)和jQuery piroBox库文件(目前版本1.1)

素材准备
1，自定义图片显示效果的CSS样式文件，控制jQuery插件piroBox弹出图片盒样式
2，需要展示的图片，每张图片有一张实现Javascript新窗口全屏展示大图和一张提示的小图，如下效果图

3，Javascript新窗口全屏展示按钮图，ajax提示图等

实例代码
一，包含文件部分

1. <script type="text/javascript" src="jquery.js"></script>
2. <script type="text/javascript" src="piroBox_pack.js"></script>

二，HTML部分(部分)

1. <div class="pirobox">
2. <ul class="thumbs_all">
3. <li><a href="images/nv33.jpg" title=""><img src="images/nv33_s.jpg" alt="demo" width="100" /></a></li>
4. <li><a href="images/nv33.jpg" title="biuuu"><img src="images/nv33_s.jpg" alt="demo" width="100" /></a></li>
5. <li><a href="images/nv33.jpg" title="biuuu.com"><img src="images/nv33_s.jpg" width="100" /></a></li>
6. <li><a href="images/nv33.jpg" title="必优博客"><img src="images/nv33_s.jpg" alt="demo" width="100" /></a></li>
7. </ul>
8. </div>

三，Javascript部分(jQuery插件piroBox弹出图片盒)

1. <script type="text/javascript">
2. $(document).ready(function(){
3. $('.thumbs').piroBox({
4. mySpeed: 500,
5. bg_alpha: 0.8,
6. pathLoader : 'url(ajax-loader.gif) center center no-repeat;',
7. gallery : '.pirobox li a',
8. gallery_li : '.pirobox li',
9. single : '.single  a',
10. next_class : '.next',
11. previous_class : '.previous'
12. });
13. });
14. </script>

代码分析(具体可查看jQuery插件piroBox弹出图片盒的JS库文件)
mySpeed 弹出窗口展示速度，如：500
bg_alpha表示背景透明度，如：0.8
pathLoader表示ajax加载图片及样式，如：'url(ajax-loader.gif) center center no-repeat;'
gallery表示需要展示的图片库，实例表示class为pirobox的DIV层下面li中包含链接的所用图片，如：'.pirobox li a'
gallery_li表示图片库调用的li，如：'.pirobox li'
single 单张图片链接CSS样式，如：'.single  a'
next_class表示提示下一张图片按钮的CSS样式，如：'.next'
previous_class表示提示上一张图片按钮的CSS样式，如：'.previous'

实例可知，jQuery插件piroBox弹出图片盒实现Javascript新窗口全屏展示图片功能的JS调用非常简单，只需要获取展示图片的DIV层，重点是设置好相关的CSS样式，可自定义进行图片弹出展示样式等设置，扩展jQuery插件piroBox图片弹出盒的效果，jQuery插件piroBox弹出图片盒与上期jQuery插件ImageFlyout弹出图片区别在于jQuery ImageFlyout只能展示单张图片，仅仅是一个弹出图片效果，而jQuery PiroBox弹出一个图片库，可对图片展示进行播放控制，实用性更强，值得推荐。

点我下载jQuery插件piroBox弹出图片盒实现Javascript新窗口全屏展示图片功能 DEMO