1465人阅读
prettyPhoto是一款基于jquery的轻量级的lightbox图片特效脚本，它不仅支持图片，还同时支持视频、flash、 YouTube、iframe和ajax。而且prettyPhoto配置和使用都十分简单，扩展性也不错，你可以最大限度地自定义 prettyPhoto。prettyPhoto兼容大部分主流的浏览器，有些Wordpress图片插件就是基于此脚本制作的。
比如：Wordpress插件：
建议英文好的朋友直接去官网上了解这个插件的用法，如果你的英文很烂，那么也别急，下面我就给大家来一一介绍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="images/thumbnails/t_2.jpg" width="60" height="60" alt="This is the title" /&
2、图片相册
&a href="images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]" title="You can add caption to pictures."&
&img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" /&
&a href="images/fullscreen/2.jpg" rel="prettyPhoto[pp_gal]"&
&img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Nice building" /&
&a href="images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]"&
&img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" /&
&a href="images/fullscreen/4.jpg" rel="prettyPhoto[pp_gal]"&
&img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="Rock climbing" /&
&a href="images/fullscreen/5.jpg" rel="prettyPhoto[pp_gal]"&
&img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="Fly kite, fly!" /&
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="images/thumbnails/flash-logo.jpg" alt="Flash 10 demo" width="60" /&
4、YouTube视频
&a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title=""&
&img src="images/thumbnails/flash-logo.jpg" alt="YouTube" width="60" /&
&a href="http://vimeo.com/8245346" rel="prettyPhoto" title=""&
&img src="images/thumbnails/flash-logo.jpg" alt="YouTube" width="60" /&
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 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 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" /&
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&
9、AJAX内容
&a rel="prettyPhoto[ajax]" href="/demos/prettyPhoto-jquery-lightbox-clone/xhr_response.html?
ajax=true&width=325&height=185"&Ajax content&/a&
微信公众号
想要源码加群，群文件里下载
私信不能及时回复，进群@群主
个人网站：
文章：49篇
阅读：58442jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载) | WEB开发
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
本文实例讲述了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果。分享给大家供大家参考，具体如下：
该插件乃文章作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。
此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果，您可以根据自己的实际需求来设置是否添加左右切换图片的效果。整体代码如下：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&无标题文档&/title&
*{margin:0;padding:0;}
li{list-style:}
.item{margin:20}
.item ul li{float:margin-right:20}
.item ul li img{width:100cursor:}
.lb_wrap{display:}
.lightbox_bg{background:#000;filter:alpha(opacity=70);opacity:.7;position:left:0;top:0;width:100%;height:100%;z-index:1;}
.lightbox{position:left:0;top:50%;width:100%;z-index:2;text-align:}
.lightbox p{position:height:61width:38top:50%;left:0;z-index:2;background:transparent url(themes.png) no-margin-top:-30.5cursor:}
.lightbox p.next{left:background-position:right:0;}
&script type="text/javascript" src="jquery-1.7.1.js"&&/script&
&script type="text/javascript" src="jquery.LightBox.js"&&/script&
&div class="item"&
&li&&img src="01.jpg" /&&/li&
&li&&img src="02.jpg" /&&/li&
&li&&img src="03.jpg" /&&/li&
&li&&img src="04.jpg" /&&/li&
&li&&img src="05.jpg" /&&/li&
&li&&img src="06.jpg" /&&/li&
$(function(){
$(".item").LightBox({
controls : true //上一张、下一张按钮是否显示，默认是显示true
插件jquery.LightBox.js代码：
*LightBox 1.0
*dependence jquery-1.7.1.js
;(function(a){
a.fn.LightBox = function(options){
var defaults = {
controls : true //上一张、下一张按钮是否显示，默认是显示true
var opts = a.extend(defaults, options);
var lb_wrap = '&div class="lb_wrap"&&div class="lightbox_bg"&&/div&&div class="lightbox"&&img src="loading.gif" class="lg_img"&&/div&&/div&';
a("body").append(lb_wrap);
//controls
if(opts.controls){
a(".lightbox").append('&p class="prev"&&/p&&p class="next"&&/p&');
function imgobj(obj1, obj2){
//imgObj.height是通过img对象获取的图片的实际高度
var imgObj = new Image();
imgObj.src = obj1.attr("src");
var margintop = 0 - (imgObj.height)/2;
obj2.css("margin-top",margintop);
this.each(function(){
var obj = a(this);
var numpic = obj.find("li").
var num = 0;
//点击赋值并显示
obj.find("img").click(function(){
var src = a(this).attr("src");
a(".lg_img").attr("src",src);
imgobj(a(".lg_img"), a(".lightbox"));
a(".lb_wrap").fadeIn();
a(".lg_img").fadeIn();
a(".prev").fadeIn().siblings(".next").fadeIn();
num = a(this).parent().index();
//获取当前图片的父元素的索引并赋给num为后边点击上一张、下一张服务
a(".prev").click(function(){
if(num == 0){
var src = obj.find("li").eq(num-1).find("img").attr("src");
a(".lg_img").attr("src",src);
imgobj(a(".lg_img"), a(".lightbox"));
a(".next").click(function(){
if(num == numpic-1){
var src = obj.find("li").eq(num+1).find("img").attr("src");
a(".lg_img").attr("src",src);
imgobj(a(".lg_img"), a(".lightbox"));
//点击除了上一张、下一张之外的其他地方隐藏
a(".lb_wrap").click(function(e){
var e = e || window.
var elem = e.target || e.srcE
while(elem){
if (elem.className && elem.className.indexOf('prev')&-1) {
if(elem.className && elem.className.indexOf('next')&-1){
elem = elem.parentN
a(this).find("img").attr("src","loading.gif").hide(); //隐藏后，再将默认的图片赋给lightbox中图片的src
a(this).find(".prev").hide().siblings(".next").hide();
a(this).fadeOut();
})(jQuery);
完整实例代码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。jQuery手机端Lightbox图片展示特效
作者/代码整理：&&(转载请附加本文地址，带有“懒人原生”字样的谢绝转载) 发布日期：
这是一款在桌面设备中点击图片时会以Lightbox的方式来展示图片；在移动手机的小屏幕中，会以轮播图的方式来展示图片jQuery手机端Lightbox图片展示特效。
&script src="js/jquery-1.11.0.min.js" type="text/javascript"&&/script&
&script src="js/jquery-smartphoto.min.js?v=1"&&/script&
$(function(){
$(".js-smartPhoto").smartPhoto();
猜你喜欢...当前位置： >
化繁为简，我们帮助您更好的运用代码。给你的代码都是选之又选，懒人图库拒绝滥竽充数！ 　 　
图片特效图片特效图片特效图片特效图片特效图片特效图片特效图片特效图片特效图片特效图片特效图片特效图片特效图片特效图片特效图片特效图片特效图片特效图片特效图片特效图片特效图片特效
猜你也喜欢看这些 ??????
这些是最新的...
我们一直在进步}