您的位置：首页 > Web前端 > JQuery

PrettyPhoto，一款基于Jquery的图片播放插件的使用

2014-06-12 17:20 976 查看

    PrettyPhoto是一款基于jquery的轻量级的lightbox图片浏览插件，它不仅支持图片播放，而且还支持视频、flash、YouTuBe、Iframe及ajax。此外，PrettyPhoto在配置、使用或者扩展使用方面都有不错的表现，另外，它兼容了市面上主流浏览器，其中就包括了让web工程师抓狂的IE6。与此之外，它可以实现在查看大图的页面上展示缩略图。正因为这些优质的特性，让它成为了让人爱不释手图片展示插件，下面我们就来说说它的使用。


1.在官网上下载js以及css库，在这里本人使用的是它的压缩版：

2.解压后找到jquery.prettyPhoto.js文件和prettyPhoto.css文件，放置到你的静态页面中

<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css" media="screen" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/prettyPhoto.js"></script><span style="font-family:SimSun;font-size:14px;"><span style="background-color: rgb(255, 255, 255);"></span></span><span style="font-size:14px;"></span>


3.初始化js，让页面支持 PrettyPhoto

<script type="text/javascript">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>

    4.页面内容

<body>
<a href="http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81a1f99ef7be3eb13532fa40e6.jpg" rel="prettyPhoto[pp_gal]" title="">
<img src="http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81a1f99ef7be3eb13532fa40e6.jpg" alt="this is text img" width="190" height="120"/>
</a>
<a href="http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb9385505fcfbd7628535e5dd6f4b.jpg" rel="prettyPhoto[pp_gal]" title="">
<img src="http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb9385505fcfbd7628535e5dd6f4b.jpg" alt="this is text img" width="190" height="120" style="display:none"/>
</a>
</body>

    4.结果

如果你的英文功底不错呢，建议你直接到PrettyPhone官网查看演示或者学习：http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： PrettyPhoto jquery 图片展示图片

相关文章推荐

新的分享

章节导航