使用jQuery框架的prettyPhoto图片特效
时间:2009-12-27 来源:互联网
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文件。
- 栏目搜索>>分类导航
-
Flash幻灯
jQuery幻灯
JS幻灯
Flash相册
jQuery相册
图片特效
导航菜单
广告代码
在线客服
表单按钮
其它特效
-
HTML
CSS
JavaScript
Dreamweaver
Fireworks
设计分享
-
建站教程
网站运营
实用工具
网页模板
网页素材
- CSS酷站 网上购物 设计团队 设计博客

