jquery图片播放浏览插件prettyPhoto
为什么80%的码农都做不了架构师?>>>
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>
或者
<a href="img/portfolio-01.jpg" rel="prettyPhoto"><img src="img/portfolio-01.jpg" class="img-responsive" alt=""></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>
转载于:https://my.oschina.net/lpcysz/blog/838462
jquery图片播放浏览插件prettyPhoto相关推荐
- jquery图片播放切换插件
点击这里查看效果 可自定义数字样式和左右点击按钮 这个更好: 移入按钮切换版本 更多图片轮播 以下是HTML文件代码: 1 <!DOCTYPE html PUBLIC "-//W3C/ ...
- jQuery实现图片播放器插件
jquery 图片播放器插件 文章原创,欢迎转载,转载请注明出处:http://blog.csdn.net/xxd851116 作者:笑的自然 我的博客:http://blog.csdn.net/x ...
- 播放器图片html,jQuery实现类似视频播放功能的图片播放器插件
jquery Image Player是一款可以像视频播放一样逐张播放图片的图片播放器jQuery插件.当你需要介绍你的某个产品和项目的时候,这个插件就可以发挥它的强大作用.你可以将产品或项目的各个功 ...
- 网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
- html轮播图水平传送带,经典的白富美型jQuery图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- jQuery 图片轮播插件
网站项目必备--12款经典的白富美型 jQuery 图片轮播插件 图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 ...
- html图片展示插件,12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- 12款经典的白富美型 jQuery 图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精 ...
- 网站项目必备——12款经典的白富美型 jQuery 图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
最新文章
- 手机如何看python代码_python如何绘制iPhone手机图案?(代码示例)
- 数据库管理专才四步走
- 002_模板 + 数据模型 = 输出
- 一道暴力枚举题Win32版本示例
- c语言中width获取窗体宽度,获取屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别...
- Eclipse闪退解决方案
- java地铁最短,地铁最短路径
- 开源视频质量评价工具: IQA
- 用Java实现向Cassandra数据库中插入和查询数据
- 51单片机最小系统的检查
- OpenGL ——安装和环境配置
- 重庆市打造集感知、分析、指挥“五位一体”的智慧城管系统
- GSCC呼叫中心系统
- 电子设计教程21:晶体管差分放大电路
- Python 情人节超强技能 导出微信聊天记录生成词云,深入讲解Python
- 如何判定多边形是顺时针还是逆时针
- Blue Coat 2.8亿美元收购云安全创业企业Elastica
- [buuctf.reverse] 33到50题
- java串口rxtx下载_WINDOWS环境下JAVA串口RXTX编程DEMO
- ORDER BY用法,避坑
热门文章
- [语音录制与播放]stm32+adc+dac
- 使用VS TFS源码分析软件PATFS在Team Explorer中检查Incidents事件
- 打印系统开发(38)——API(3)——windows设置默认打印机
- Cesium:3D-Tiles模型剖面图分析
- AI中分类算法与聚类算法
- 分析数据, 缺失值处理 ,去重处理, 噪音处理
- 呆滞物料都是泪,企业该如何避免难题?
- 论文翻译之——《基于XGBoost的房价预测优化》-陶然
- vue+element 上传图片的进度显示
- [图像融合-论文笔记]A multiscale residual pyramid attention network for medical image fusion一种用于医学图像融合的多尺度残差金