使用jQuery框架的prettyPhoto图片特效

prettyPhoto与Lightbox不同的是基于jQuery框架，当然也可以使用Google Ajax Library API来加载jQuery库，个人觉得跟其它Lightbox效果大同小异，同样也支持键盘操作、图片标题和简介，主要有以下几个特色功能：

• 文件格式支持上丰富了许多；
• 支持超大幅图片自动缩放功能；
• 支持Iframe，可以把外部网站包含进来了；
• 混合展示，你可以把图片/视频/网页组合成一组来展示；
• 支持文字内容以内联方式展示；
• 还有可以支持不同的主题，不过是要付美金的。

浏览器支持

• Firefox 2.0+
• Safari 3.1.1+
• Opera 9+
• Internet Explorer 6.0+

官方声称支持IE6，但实际测试中却发现不太理想，比如PNG图标透明的问题没有处理，在Firefox中效果倒是挺完美的。

使用方法

单图：在图片链接上增加rel="prettyPhoto"，例如

<a href="images/fullscreen/2.jpg" rel="prettyPhoto"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Picture alone 1" /></a>

组图：在同一组图片链接上添加rel="prettyPhoto[gallery1]"，不同组的图片用[gallery2]来区别，更多的以此类推，示例
 

组图1

<ul class="gallery clearfix">
<li><a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_1.jpg"/></a></li>
<li><a href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_2.jpg"/></a></li>
</ul>

组图2

<ul class="gallery clearfix">
<li><a href="images/fullscreen/3.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_3.jpg"/></a></li>
<li><a href="images/fullscreen/4.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_4.jpg"/></a></li>
</ul>

FLASH等多媒体文件的用法跟以上相似，具体请参阅DEMO文件。