jQ图片Lightbox灯箱特效代码

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

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

以下是 jQ图片Lightbox灯箱特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html lang="en-US" dir="ltr">
<head>
<title>jQuery图片Lightbox灯箱</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="content-language" content="en" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/vlightbox1.css" type="text/css" />
<link rel="stylesheet" href="css/visuallightbox.css" type="text/css" media="screen" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/visuallightbox.js" type="text/javascript"></script>
</head><body>
<div id="content">

<div class="section_first_demo">

<div class="top_menu">
&nbsp;</div>

<div class="separator"></div>

<h3>jQuery图片Lightbox灯箱</h3>
<!-- Start VisualLightBox.com BODY section id=1 -->
<div id="vlightbox1" align="center">
<a class="vlightbox1" href="images/1.jpg" title="Sea turtle visits for lunch">
<img src="images/img/1.jpg" alt="Sea turtle visits for lunch"/>Sea turtle visits for lunch</a>
<a class="vlightbox1" href="images/2.jpg" title="Chesil Beach">
<img src="images/img/2.jpg" alt="Chesil Beach"/>Chesil Beach</a>
<a class="vlightbox1" href="images/4.jpg" title="Sea, Iceland">
<img src="images/img/4.jpg" alt="Sea, Iceland"/>Sea, Iceland</a>
<a class="vlightbox1" href="images/5.jpg" title="Monterey Bay Aquarium">
<img src="images/img/5.jpg" alt="Monterey Bay Aquarium"/>Monterey Bay Aquarium</a>
<a class="vlightbox1" href="images/6.jpg" title="Sea star">
<img src="images/img/6.jpg" alt="Sea star"/>Sea star</a>
<a class="vlightbox1" href="images/9.jpg" title="Mallorca, Spain">
<img src="images/img/9.jpg" alt="Mallorca, Spain"/>Mallorca, Spain</a>
<a class="vlb" href="#">Lightbox Images by VisualLightBox.com v5.3</a>
</div>
<script src="js/vlbdata1.js" type="text/javascript"></script>
<br />
</div>
</div>
</body>
</html>

JS代码(vlbdata1.js):

jQuery(document).ready(function(){
	window.Lightbox = new jQuery().visualLightbox({
	autoPlay:true,borderSize:10,classNames:'vlightbox1',closeLocation:'top',descSliding:true,enableRightClick:false,enableSlideshow:true,resizeSpeed:7,slideTime:4,startZoom:true}
)}
);

CSS代码(visuallightbox.css):

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);#overlay{position:absolute;top:0;left:0;z-index:190;width:100%;height:auto;background-color:#a3a3a3;}
#lightbox{position:absolute;top:20px;left:0;width:100%;z-index:200;text-align:center;color:#151410;line-height:0;padding-top:20px;}
#lightbox a,#lightbox a:hover{border-bottom:none;color:#151410;text-decoration:underline;}
#lightbox a img{border:none;}
#outerImageContainer{width:auto;height:auto;/* without this line error in IE8 detected */
margin:0 auto;position:relative;}
#lightboxImage{width:100%;height:100%;}
#imageContainerMain{margin:0 auto;overflow:visible;position:relative;font-size:0;/* ie fix - big info bar*/
}
#imageContainer{width:150px;height:30px;margin:0 auto;overflow:hidden;background-color:#fff;position:relative;font-size:0;/* ie fix - big info bar*/
}
#loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;font-size:10px;z-index:1;}
#loadingLink{display:block;margin:0 auto;padding:0;width:150px;height:29px;background:url(loading.gif) center center no-repeat;text-indent:-9999px;}
#hoverNav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10;}
#imageContainer>#hoverNav{left:0;}
#prevLinkImg{top:45%;height:50px;width:50px;position:absolute;z-index:20;outline-style:none;display:block;text-indent:-9999px;background-position:0 0;}
#nextLinkImg{top:45%;height:50px;width:50px;position:absolute;z-index:20;outline-style:none;display:block;text-indent:-9999px;background-position:100% 0;}
* html #prevLinkImg,* html #nextLinkImg{background-image:url(data:image/gif;base64,AAAA);/* Trick IE into showing hover */
}
#prevLinkImg{left:3px;}
#nextLinkImg{right:3px;}
#prevLinkImg:hover,#prevLinkImg.hover,#prevLinkImg:visited:hover{background-position:0 100%;}
#nextLinkImg:hover,#nextLinkImg.hover,#nextLinkImg:visited:hover{background-position:100% 100%;}
#imageContainerMain:hover #prevLinkImg,#imageContainerMain:hover #nextLinkImg{background-image:url(arrows.png);}
* html #prevLinkImg{background-image:url(arrows.png);}
* html #nextLinkImg{background-image:url(arrows.png);}
#imageDataContainer{width:auto;position:absolute;z-index:21;bottom:20px;left:10px;}
#imageData{font-family:'Open Sans Condensed',sans-serif;font-size:20px;font-weight:bold;line-height:20px;color:#4589ce;background-color:#ffffff;border-radius:0px 6px 6px 0px;margin-right:15px;overflow:visible;position:relative;z-index:21;text-align:center;opacity:0.8;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);}
#imageDetails{width:100%;padding:0;}
#caption{display:block;text-align:left;padding:12px;}
#numberDisplay{display:none;text-align:right;}
#detailsNav{display:none;}
#prevLinkDetails,#nextLinkDetails,#slideShowControl{display:none;}
#close{position:relative;width:100%;height:0;z-index:21;}
#closeLink{position:absolute;top:-20px;right:-15px;display:block;outline-style:none;margin:0;padding:0;text-decoration:none;width:40px;height:40px;background:url(close.png) no-repeat;_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/close.png',sizingMethod='scale');}
#closeLink:hover{background:url(close_hover.png) no-repeat;_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='close_hover.png',sizingMethod='scale');}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
* html>body .clearfix{display:inline-block;width:100%;}
* html .clearfix{/* Hides from IE-mac \*/
height:1%;/* End hide from IE-mac */
}
#outerImageFrame{border:5px solid red;height:100%;width:100%;position:absolute;}
#outerImageContainer{overflow:visible;}
#outerImageContainer td{text-align:center;padding:0;}
#lightboxFrameBody{background-color:transparent;}
.vlb{display:none;}
#outerImageContainer td,#outerImageContainer tr{font-size:0;border:0 none;}
#outerImageContainer td.tl,#outerImageContainer td.br{height:10px;width:10px;}
#outerImageContainer td.tc{background-image:url(borderHoriz.png);_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderHoriz.png',sizingMethod='scale');}
#outerImageContainer td.ml{background-image:url(borderVert.png);_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderVert.png',sizingMethod='scale');}
#outerImageContainer td.mr{background-image:url(borderVert.png);_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderVert.png',sizingMethod='scale');}
#outerImageContainer td.bc{background-image:url(borderHoriz.png);_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderHoriz.png',sizingMethod='scale');}
#outerImageContainer td.tl{background:url(borderCorners.png) 0 0;_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderCorners.png',sizingMethod='scale');}
#outerImageContainer td.tr{background:url(borderCorners.png) 100% 0;_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderCorners.png',sizingMethod='scale');}
#outerImageContainer td.bl{background:url(borderCorners.png) 0 100%;_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderCorners.png',sizingMethod='scale');}
#outerImageContainer td.br{background:url(borderCorners.png) 100% 100%;_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderCorners.png',sizingMethod='scale');}
/*#outerImageContainer td.bc{background-image:url($rel#shadow.png$) left 0%;_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='$shadow.png$',sizingMethod='scale');}
*/

CSS代码(vlightbox1.css):

#vlightbox1{width:100%;zoom:1;}
#vlightbox1 .vlightbox1{display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;position:relative;vertical-align:top;margin:5px;font-family:Trebuchet,Tahoma,Arial,sans-serif;font-size:11px;font-weight:normal;text-decoration:none;text-align:center;color:#000;padding:10px;border:1px solid #eee;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,0.1);-webkit-transform:rotate(-3deg);-moz-transform:rotate(-3deg);-ms-transform:rotate(-3deg);-o-transform:rotate(-3deg);transform:rotate(-3deg);-webkit-transform-style:preserve-3d;}
#vlightbox1 .vlightbox1 a{margin:0;}
#vlightbox1 .vlightbox1 img{display:block;border:none;margin:0;}
#vlightbox1 .vlightbox1 div{display:none}
#vlightbox1 .vlightbox1:nth-child(even){-webkit-transform:rotate(3deg) scale(1.05);-moz-transform:rotate(3deg) scale(1.05);-ms-transform:rotate(3deg) scale(1.05);-o-transform:rotate(3deg) scale(1.05);transform:rotate(3deg) scale(1.05);}
/*#vlightbox1 .vlightbox1:nth-child(5n){-webkit-transform:rotate(-4deg) scale(0.9);-moz-transform:rotate(-4deg) scale(0.9);-ms-transform:rotate(-4deg) scale(0.9);-o-transform:rotate(-4deg) scale(0.9);transform:rotate(-4deg) scale(0.9);position:relative;left:-10px}
*/
#vlightbox1 .vlightbox1{-moz-transition:all 0.1s ease-out;-o-transition:all 0.1s ease-out;-webkit-transition:all 0.1s ease-out;transition:all 0.1s ease-out;}
#vlightbox1 .vlightbox1:hover{position:relative;z-index:10;box-shadow:8px 8px 15px rgba(0,0,0,0.4);-webkit-transform:rotate(0deg) scale(1.2);-o-transform:rotate(0deg) scale(1.2);-moz-transform:rotate(0deg) scale(1.2);-ms-transform:rotate(0deg) scale(1.2);transform:rotate(0deg) scale(1.2);}
/*#vlightbox1 .vlightbox1:before,#vlightbox1 .vlightbox1:after{content:"";position:absolute;z-index:-1;bottom:8px;left:10px;width:50%;height:20%;max-width:300px;box-shadow:0 8px 16px rgba(0,0,0,0.6);-webkit-transform:skew(-15deg) rotate(-6deg);-moz-transform:skew(-15deg) rotate(-6deg);-ms-transform:skew(-15deg) rotate(-6deg);-o-transform:skew(-15deg) rotate(-6deg);transform:skew(-15deg) rotate(-6deg)}
#vlightbox1 .vlightbox1:after{left:auto;right:10px;-webkit-transform:skew(15deg) rotate(6deg);-moz-transform:skew(15deg) rotate(6deg);-ms-transform:skew(15deg) rotate(6deg);-o-transform:skew(15deg) rotate(6deg);transform:skew(15deg) rotate(6deg)}
*/

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