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

使用教程：基于jQuery的PrettyPhoto图片播放插件

最新推荐文章于 2019-07-13 07:40:52 发布

J园

最新推荐文章于 2019-07-13 07:40:52 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端技术文章标签： PrettyPhoto jquery 图片展示图片

本文链接：https://blog.youkuaiyun.com/dailovemin/article/details/30259029

前端技术专栏收录该内容

2 篇文章

订阅专栏

PrettyPhoto是一款轻量级的lightbox图片浏览插件，支持图片、视频等多种媒体展示，并且兼容主流浏览器，包括IE6。本文介绍了如何下载并使用PrettyPhoto，包括引入库文件、初始化JS和实际应用。

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.结果