关于图片视频浏览插件prettyPhoto的使用方法

2017-4-11 hanbin JavaScript

  最近在工作项目中遇到点击图片或视频弹框浏览的需求，在网上找到了jquery的prettyphoto插件，感觉很不错，在这里分享一下。

  prettyPhoto是一款基于jquery的轻量级的lightbox图片播放浏览插件，它不仅支持图片，还同时支持视频、flash、iframe和ajax。而且prettyPhoto配置和使用都十分简单，扩展性也不错，你可以最大限度地自定义prettyPhoto。目前，prettyPhoto兼容大部分主流的浏览器，包括令人纠结的IE6。

使用方法：

1.引入jquery和prettyphoto插件库，与prettyphoto样式。

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" charset="utf-8" /> <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

2.配置prettyphoto.js。

$(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); });

3.每种类型的html。

（1）单张图片。

<a href="images/fullscreen/2.jpg" rel="prettyPhoto"><img src="images/2.jpg" width="60" height="60" /></a>

（2）图片相册。

<a href="images/fullscreen/2.jpg" rel="prettyPhoto[pp_gal]"><img src="images/2.jpg" width="60" height="60" /></a> <a href="images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]"><img src="images/3.jpg" width="70" height="60" /></a>

（3）flash。

<a "http://player.youku.com/player.php/sid/XODE1NDI2MjYw/v.swf?width=792&height=500" rel="prettyPhoto[flash]" > <img src="images/flash-logo.jpg" width="60" /> </a>

（4）外部网站iframe。

<a href="http://www.baidu.com?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" >baidu.com</a>

（5）文本。

<a href="#text" rel="prettyPhoto" ><img src="images/2.jpg" alt="" width="50" /></a> <div id="text" style="display:none;"> <p>文本1</p> <p>文本2</p> </div>

（6）ajax内容。

<a rel="prettyPhoto[ajax]" href="/demos/prettyPhoto-jquery-lightbox-clone/xhr_response.html? ajax=true&width=325&height=185">Ajax content</a>

注：

因为这款插件来自国外所以暂只支持youtube，vimeo，quicktime影片，暂不支持本地视频。对视频格式也有要求。

标签: prettyphoto jquery

网站备案号：京ICP备11043289号-1 北京市公安局网络备案 海1101084571

版权所有 北京育灵童科技发展有限公司 Copyright © 2002-2024 www.elight.cn, All Rights Reserved