可进可退,jQuery图片、视频、flash播放插件prettyPhoto使用记录
一、prettyPhoto简介
prettyPhoto是一款基于jquery的轻量级的lightbox图片播放浏览插件,它不仅支持图片,还同时支持视频、flash、YouTube、iframe和ajax。而且prettyPhoto配置和使用都十分简单,扩展性也不错,你可以最大限度地自定义prettyPhoto。目前,prettyPhoto兼容大部分主流的浏览器,包括令人纠结的IE6。
prettyPhoto插件的项目地址:http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
建议英文好的朋友直接去官网上了解这个插件的用法,如果你的英文很烂,那么也别急,下面我就给大家来一一介绍prettyPhoto的使用方法。
二、prettyPhoto使用方法介绍
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" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
2、初始化jquery插件,以下是最简单的配置的js代码
$(document).ready(function(){$("a[rel^='prettyPhoto']").prettyPhoto(); });
下面是每种类型的html代码
1、单张图片
<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="This is the description">
<img src="data:images/thumbnails/t_2.jpg" width="60" height="60" alt="This is the title" />
</a>
2、图片相册
<a href="images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]" title="You can add caption to pictures.">
<img src="data:images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" />
</a>
<a href="images/fullscreen/2.jpg" rel="prettyPhoto[pp_gal]">
<img src="data:images/thumbnails/t_2.jpg" width="60" height="60" alt="Nice building" />
</a>
<a href="images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]">
<img src="data:images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" />
</a>
<a href="images/fullscreen/4.jpg" rel="prettyPhoto[pp_gal]">
<img src="data:images/thumbnails/t_4.jpg" width="60" height="60" alt="Rock climbing" />
</a>
<a href="images/fullscreen/5.jpg" rel="prettyPhoto[pp_gal]">
<img src="data:images/thumbnails/t_5.jpg" width="60" height="60" alt="Fly kite, fly!" />
</a>
3、单个flash
<a href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&height=294"
rel="prettyPhoto[flash]" title="Flash 10 demo">
<img src="data:images/thumbnails/flash-logo.jpg" alt="Flash 10 demo" width="60" />
</a>
4、YouTube视频
<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title="">
<img src="data:images/thumbnails/flash-logo.jpg" alt="YouTube" width="60" />
</a>
5、Vimeo
<a href="http://vimeo.com/8245346" rel="prettyPhoto" title=""> <img src="data:images/thumbnails/flash-logo.jpg" alt="YouTube" width="60" /> </a>
6、QuickTime影片
<a title="Despicable Me" rel="prettyPhoto[movies]" href="http://trailers.apple.com/movies/universal/despicableme/despicableme-tlr1_r640s.mov?width=640&height=360"> <img src="/wp-content/themes/NMFE/images/thumbnails/quicktime-logo.png" alt="Despicable Me" width="50" /> </a> <a title="Tales from Earthsea" rel="prettyPhoto[movies]" href="http://trailers.apple.com/movies/disney/talesfromearthsea/talesfromearthsea-tlr1_r640s.mov?width=640&height=340"> <img src="/wp-content/themes/NMFE/images/thumbnails/quicktime-logo.png" alt="Tales from Earthsea" width="50" /> </a> <a title="Grease Sing-A-Long" rel="prettyPhoto[movies]" href="http://trailers.apple.com/movies/paramount/greasesingalong/greasesingalong-tlr1_r640s.mov?width=640&height=272"> <img src="/wp-content/themes/NMFE/images/thumbnails/quicktime-logo.png" alt="Grease Sing-A-Long" width="50" /> </a>
7、外部网站(iframe)
<a href="http://www.google.com?iframe=true&width=100%&height=100%"
rel="prettyPhoto[iframes]" title="Google.com opened at 100%">Google.com</a>
<a href="http://www.apple.com?iframe=true&width=500&height=250" rel="prettyPhoto[iframes]">Apple.com</a>
<a href="http://www.twitter.com?iframe=true&width=400&height=200" rel="prettyPhoto[iframes]">Twitter.com</a>
8、普通文本
<a href="#inline-1" rel="prettyPhoto" ><img src="/wp-content/themes/NMFE/images/thumbnails/earth-logo.jpg" alt="" width="50" /></a>
<div id="inline-1" class="hide"><p>这里是普通的文本</p><p>今天给大家介绍的prettyPhoto希望大家能喜欢,这个是播放普通文本的html</p>
</div>
9、AJAX内容
<a rel="prettyPhoto[ajax]" href="/demos/prettyPhoto-jquery-lightbox-clone/xhr_response.html?
ajax=true&width=325&height=185">Ajax content</a>
三、总结
prettyBox图片播放插件很好用,赶紧用它来打造你的专属相册吧!
可进可退,jQuery图片、视频、flash播放插件prettyPhoto使用记录相关推荐
- jQuery图片播放插件prettyPhoto使用介绍
演示效果 http://www.17sucai.com/preview/131993/2014-07-09/mac-Bootstrap/gallery.html 点击之后的效果 使用方法 Query ...
- jQuery层叠式视频列表播放
jQuery层叠式视频列表播放 jQuery悬挂层叠式的图片列表点击视频播放,带左右按钮控制上下一个视频轮播切换效果.这是一款视频列表播放布局代码. 演示地址 下载地址
- jQuery图片批量上传插件源码,支持批量上传、预览、删除、放大,可配置上传数量、上传大小、追加方式,含详细使用文档
jQuery图片批量上传插件源码,支持批量上传.预览.删除.放大,可配置上传数量.上传大小.追加方式,含详细使用文档 程序包内含使用Demo 完整程序源代码:jQuery图片批量上传插件源码 上传前 ...
- ubuntu14.04安裝chromium浏览器的Flash播放插件
ubuntu14.04安裝Flash播放器插件 也不知先前安裝的东东有没有作用.执行下面的命令后,chromium 可以 看youku视频 sudo apt-get install pepperfla ...
- WordPress 7B2主题插件分享 – 动漫视频在线播放插件Selection
简介: 这个插件和上篇分享的统计插件都是基于7B2主题开发的,用在其他主题可能产生无法使用的可能或者CSS错乱的问题 这款插件就厉害了,可以让7B2主题从一个博客主题变成视频在线播放网站,此插件是开源 ...
- 前端实现序列帧_炫酷H5中序列图片视频化播放的高性能实现
作者:张鑫旭 1.爆款H5中的炫酷场景的技术实现 每年都会迸出一些爆款H5,这些H5通常会有一些酷酷的场景变换. 例如网易Julia H5.创意很棒,传播效果很广,其技术实现就相当简单粗暴,直接一个3 ...
- jQuery图片批量上传插件
下载地址 jQuery图片批量上传网页插件,可以实现上传图片预览拖拽排序,编辑图片功能支持多个多图上传功能特效. dd:
- php 批量上传图片插件,ajaxImageUpload——一个jQuery图片批量上传插件
ajaxImageUpload 原创jQuery图片上传插件,支持批量上传.预览.删除.放大.上传数量.上传大小.追加方式配置以及上传前.上传中和上传后的回调函数. 演示地址:http://www.g ...
- 20个jQuery 图片及多媒体画廊插件
在本文中,我们将一起看一看20款最好的jquery插件,你可以利用它轻松创建功能丰富的画廊.这其中的一些支持多媒体格式,比如视频和Flash,也有一些可能是老面孔了,可以说是经过时间验证,非常可靠. ...
最新文章
- 4个实验,彻底搞懂TCP连接的断开
- 华为云welink考试试题_华为内部开启WeLink项目,华为云是这样考虑的-通信/网络-与非网...
- STC89C52RC单片机例程实现_流水灯0(C语言实现)
- 苹果手机信号是哪个服务器,苹果手机信号差是网络问题还是手机问题
- Solr+Hbase多条件查(优劣互补)
- IDEA微服务项目的application.yml没有绿色叶子的解决办法
- html中%3csvg%3e标签的使用,微信小程序:使用svg
- Atom飞行手册翻译: 1.4 小结
- php中怎样创建数据库服务器,实例讲解通过​PHP创建数据库
- 幸运抽奖游戏系统带后台源码
- 未来十年计算机语言,随便聊聊中国未来十年热门的十大编程语言使用趋势
- 电脑照片太大怎么压缩?照片怎么缩小kb?
- 计算机 64虚拟内存设置方法,64位的WIN7,4G内存,虚拟内存怎么设置
- Linux王冠-RHCE认证概况及费用一览
- 快速搭建接口自动化平台
- html添加微信号,html代码点击复制微信号并自动打开微信添加好友
- 火爆业界的明星, 下一代存储技术的先行: NVDIMM (下篇)
- html添加视频背景
- 关于使用Windows10系统,使用LR11录制app脚本的方法说明
- Uncaught TypeError: Cannot read property 'name' of null怎么处理
热门文章
- 【数据结构与算法基础】并查集原理、封装实现及例题解析(C和java)
- Go语言爬虫框架之Colly和Goquery
- Python中的shape[0]、shape[1]和shape[-1]含义
- PSCAD V4.6电路设计与仿真从入门到精通
- Numpy和OpenCV实现傅里叶和逆傅里叶变换
- XTU,C语言,Colombian Number
- 修改ElementUI默认滚动条的样式
- 我的世界工业时代java_[IC2]工业时代2 (Industrial Craft 2)
- 浅析PCB线路板技术发展的三个阶段
- Unity高级功能—制作自己的天空盒并添加到场景