lighterbox相册照片浏览插件特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 lighterbox相册照片浏览插件特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,相册代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为lighterbox相册照片浏览插件，属于站长常用代码" />
<title>lighterbox相册照片浏览插件</title>
<link href="css/lrtk.css" media="screen" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.lighterbox.0.0.2.min.js"></script>
<script>
	$(function(){ // document ready
		$(".lighterbox").lighterbox({ overlayColor : "white" });
	});
</script>
</head>
<body>
<!-- 代码 开始 -->
<article class="clearfix">
    <section>
        <a href="images/gaugin1.jpg" class="lighterbox">
            <img src="images/thumbs/gaugin1.jpg" />
            <h2 class="lighterbox-title">Painting #1 by Paul Gaugin</h2>
            <span class="lighterbox-desc">Oil on Canvas</span>
        </a>
    </section>
    <section>
        <a href="images/gaugin2.jpg" class="lighterbox">
            <img src="images/thumbs/gaugin2.jpg" />
            <h2 class="lighterbox-title">Painting #2 by Paul Gaugin</h2>
            <span class="lighterbox-desc">Oil on Canvas</span>
        </a>
    </section>
    <section>
        <a href="images/gaugin3.jpg" class="lighterbox">
            <img src="images/thumbs/gaugin3.jpg" />
            <h2 class="lighterbox-title">Painting #3 by Paul Gaugin</h2>
            <span class="lighterbox-desc">Oil on Canvas</span>
        </a>
    </section>
    <section>
        <a href="images/gaugin4.jpg" class="lighterbox">
            <img src="images/thumbs/gaugin4.jpg" />
            <h2 class="lighterbox-title">Painting #4 by Paul Gaugin</h2>
            <span class="lighterbox-desc">Oil on Canvas</span>
        </a>
    </section>
</article>
</body>
</html>

JS代码(jquery.lighterbox.0.0.2.min.js):

!function(t,o,e){
	function i(o,e){
	s=t(o),this.options=t.extend({
}
,a,e),this.init()}
var s,n="lighterbox",a={
	overlayColor:"white",overlayOpacity:"0.95",animateSpeed:200,baseCss:{
	width:"auto",height:"auto","max-width":"100%","max-height":"100%",position:"fixed",top:"50%",right:"50%","z-index":"9998",opacity:"0"}
,loaderCss:{
	width:"30px",height:"30px",position:"fixed",left:"50%",bottom:"50%","margin-left":"-15px","z-index":"9997",background:"url('https://s3-us-west-2.amazonaws.com/nycg/loader-60x60.gif') no-repeat","background-size":"30px"}
,closeCss:{
	"font-size":"2em",color:"#000",position:"fixed",top:"0.5em",right:"0.5em","z-index":"9999",opacity:"0"}
,captionCss:{
	width:"100%","text-align":"center",background:"#000",color:"#fff",position:"fixed",bottom:"0",left:"0","z-index":"9999",opacity:"0"}
}
;
	i.prototype.destroy=function(t){
	for(var o=this,e=o.options.animateSpeed+100,i=0;
	i<t.length;
	i++)t[i].css("opacity",0);
	setTimeout(function(){
	for(var o=0;
	o<t.length;
	o++)t[o].remove()}
,e)}
,i.prototype.reposition=function(t,o){
	var e=function(){
	var e=o.height()>0?o.height():0,i=-(Math.floor(parseInt(t.height())/2)+e/2),s=-Math.floor(parseInt(t.width())/2);
	t.css({
	"margin-top":i+"px","margin-right":s+"px"}
)}
;
	return{
	init:e}
}
,i.prototype.init=function(){
	var i=this;
	s.on("click touchend",function(s){
	s.preventDefault();
	var a=t(this),r=a.find("."+n+"-title").text(),p=a.find("."+n+"-desc").text(),d="white"==i.options.overlayColor?"255,255,255":"0,0,0",c=e.createElement("div"),l=t(c),h=e.createElement("img"),f=t(h),m=e.createElement("div"),u=t(m),g=e.createElement("div"),y=t(g),v=e.createElement("a"),C=t(v),x=!1;
	i.options.baseCss["-webkit-transition"]="all "+i.options.animateSpeed+"ms ease-in-out",i.options.baseCss["-moz-transition"]="all "+i.options.animateSpeed+"ms ease-in-out",i.options.baseCss["-o-transition"]="all "+i.options.animateSpeed+"ms ease-in-out",i.options.baseCss.transition="all "+i.options.animateSpeed+"ms ease-in-out",f.addClass(n+"-img").attr("src",a.attr("href")).css(i.options.baseCss).appendTo("body");
	var b={
}
;
	for(var w in i.options.baseCss)b[w]=i.options.baseCss[w];
	b.width="100%",b.height="100%",b.top="0",b.left="0",b["z-index"]="9997",b.background="rgb("+d+")",l.addClass(n+"-overlay").css(b).appendTo(t("body")).add(C).on("click touchend",function(e){
	e.preventDefault(),e.stopPropagation(),i.destroy([l,f,C,y]),x!==!1&&t(o).off("resize",x.init)}
),u.addClass(n+"-loader").css(i.options.loaderCss).appendTo(l),"white"!=i.options.overlayColor&&(i.options.closeCss.color="#fff"),C.addClass(n+"-close").attr("href","#").html("x").css(i.options.closeCss).appendTo("body"),"white"!=i.options.overlayColor&&(i.options.captionCss.color="#000",i.options.captionCss.background="#fff"),y.addClass(n+"-caption").html("<p class='"+n+"-overlay-title'>"+r+"</p><p class='"+n+"-overlay-desc'>"+p+"</p>").css(i.options.captionCss).appendTo("body"),y.find("."+n+"-overlay-title").css({
	margin:"0.5em"}
),y.find("."+n+"-overlay-desc").css({
	margin:"0 0.5em 0.5em"}
),f.load(function(){
	x=new i.reposition(t(this),y),x.init(),t(o).resize(x.init),i.destroy([u]),setTimeout(function(){
	f.css("opacity",1)}
,i.options.animateSpeed)}
),setTimeout(function(){
	l.add(C).add(y).css("opacity",i.options.overlayOpacity)}
,1)}
)}
,t.fn[n]=function(o){
	return this.each(function(){
	t.data(this,"plugin_"+n)||t.data(this,"plugin_"+n,new i(this,o))}
)}
}
(jQuery,window,document);

CSS代码(lrtk.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
body,h1,h2{font-family:'Roboto',Arial,sans-serif;font-weight:300;}
article{max-width:610px;margin:0.5em auto;}
h1{font-size:2.7em;text-align:center;}
section{max-width:49%;float:left;margin-right:0.5%;text-align:center;}
img{max-width:100%;height:auto;}
a{color:black;text-decoration:none;}
a:hover img{opacity:0.7;}
a h2,a span{/* hide the title and caption until lighterbox shows it */
display:none;}
@media (max-width:500px){h1{font-size:1.5em;}
section{max-width:100%;float:none;}
}
.clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both;}
.clearfix{*zoom:1;}

附件:下载该文件资源,减少时间成本(增值服务)