使用jQuery框架的prettyPhoto图片特效

使用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",例如

  1. <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

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

组图2

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

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

转载请注明:代码家园 » 使用jQuery框架的prettyPhoto图片特效

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)