以下是 jquery经典Lightbox弹出框特效js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Lightbox 2</title>
<meta name="description" lang="en" content="Lightbox 2 is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers." />
<meta name="author" content="Lokesh Dhakar">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" type="image/ico" href="images/favicon.gif" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<!--<link href='http://fonts.googleapis.com/css?family=Fredoka+One|Open+Sans:400,700' rel='stylesheet' type='text/css'>-->
</head>
<body>
<div id="sidebar">
<ul id="nav">
<li><a href="#example" class="first">Example</a></li>
<li><a href="#how">How to Use</a></li>
</ul>
</div>
<div id="content">
<hr />
<div class="section" id="example">
<h2>Examples</h2>
<h3>Single image</h3>
<div class="imageRow">
<div class="single">
<a href="images/examples/image-1.jpg" rel="lightbox"><img src="images/examples/thumb-1.jpg" alt="" /></a>
</div>
<div class="single">
<a href="images/examples/image-2.jpg" rel="lightbox" title="Optional caption."><img src="images/examples/thumb-2.jpg" alt="" /></a>
</div>
</div>
<h3 style="clear: both;">Image set</h3>
<div class="imageRow">
<div class="set">
<div class="single first">
<a href="images/examples/image-3.jpg" rel="lightbox[plants]" title="Click on the right side of the image to move forward."><img src="images/examples/thumb-3.jpg" alt="Plants: image 1 0f 4 thumb" /></a>
</div>
<div class="single">
<a href="images/examples/image-4.jpg" rel="lightbox[plants]" title="Alternately you can press the right arrow key."><img src="images/examples/thumb-4.jpg" alt="Plants: image 2 0f 4 thumb" /></a>
</div>
<div class="single">
<a href="images/examples/image-5.jpg" rel="lightbox[plants]" title="The script preloads the next image in the set as you're viewing."><img src="images/examples/thumb-5.jpg" alt="Plants: image 3 0f 4 thumb" /></a>
</div>
<div class="single last">
<a href="images/examples/image-6.jpg" rel="lightbox[plants]" title="Click the X or anywhere outside the image to close"><img src="images/examples/thumb-6.jpg" alt="Plants: image 4 0f 4 thumb" /></a>
</div>
</div>
</div>
</div>
<hr />
<div class="section" id="download">
<div class="section" id="how">
<h2>How to use</h2>
<h3>Part 1 - Setup</h3>
<ol>
<li>
Lightbox 2 uses the <a href="#">jQuery</a> framework. Load jQuery and the Lightbox javascript files in the proper order.
<pre><code><script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
</code></pre>
</li>
<li>
Include the Lightbox CSS file.
<pre><code><link href="css/lightbox.css" rel="stylesheet" />
</code></pre>
</li>
<li>Check the CSS and make sure the referenced <code>prev.png</code> and <code>next.png</code> files are in the right location. Also, make sure the <code>loading.gif</code> and <code>close.png</code> files as referenced near the top of the <code>lightbox.js</code> file are in the right location.</li>
</ol>
<h3>Part 2 - Activate</h3>
<ol>
<li>
Add a <code>rel="lightbox"</code> attribute to any link tag to activate Lightbox.
<pre><code><a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
</code></pre>
<em>Optional: </em>Use the <code>title</code> attribute if you want to show a caption.
</li>
<li>
If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute.
<pre><code><a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
</code></pre>
No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!
</li>
</ol>
</div>
<hr />
</div><!-- end #content -->
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/lightbox.js"></script>
<script>
jQuery(document).ready(function ($) {
$('a').smoothScroll({
speed: 1000,
easing: 'easeInOutCubic'
});
$('.showOlderChanges').on('click', function (e) {
$('.changelog .old').slideDown('slow');
$(this).fadeOut();
e.preventDefault();
})
});
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-2196019-1']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
JS代码(lightbox.js):
/*Lightbox v2.51by Lokesh Dhakar - http://www.lokeshdhakar.comFor more information,visit:http://lokeshdhakar.com/projects/lightbox2/Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/- free for use in both personal and commercial projects- attribution requires leaving author name,author link,and the license info intactThanks- Scott Upton(uptonic.com),Peter-Paul Koch(quirksmode.com),and Thomas Fuchs(mir.aculo.us) for ideas,libs,and snippets.- Artemy Tregubenko (arty.name) for cleanup and help in updating to latest proto-aculous in v2.05.Table of Contents=================LightboxOptionsLightbox- constructor- init- enable- build- start- changeImage- sizeContainer- showImage- updateNav- updateDetails- preloadNeigbhoringImages- enableKeyboardNav- disableKeyboardNav- keyboardAction- endoptions = new LightboxOptionslightbox = new Lightbox options*/
(function(){
var $,Lightbox,LightboxOptions;
$ = jQuery;
LightboxOptions = (function(){
function LightboxOptions(){
this.fileLoadingImage = 'images/loading.gif';
this.fileCloseImage = 'images/close.png';
this.resizeDuration = 700;
this.fadeDuration = 500;
this.labelImage = "Image";
this.labelOf = "of";
}
return LightboxOptions;
}
)();
Lightbox = (function(){
function Lightbox(options){
this.options = options;
this.album = [];
this.currentImageIndex = void 0;
this.init();
}
Lightbox.prototype.init = function(){
this.enable();
return this.build();
}
;
Lightbox.prototype.enable = function(){
var _this = this;
return $('body').on('click','a[rel^=lightbox],area[rel^=lightbox]',function(e){
_this.start($(e.currentTarget));
return false;
}
);
}
;
Lightbox.prototype.build = function(){
var $lightbox,_this = this;
$("<div>",{
id:'lightboxOverlay'}
).after($('<div/>',{
id:'lightbox'}
).append($('<div/>',{
"class":'lb-outerContainer'}
).append($('<div/>',{
"class":'lb-container'}
).append($('<img/>',{
"class":'lb-image'}
),$('<div/>',{
"class":'lb-nav'}
).append($('<a/>',{
"class":'lb-prev'}
),$('<a/>',{
"class":'lb-next'}
)),$('<div/>',{
"class":'lb-loader'}
).append($('<a/>',{
"class":'lb-cancel'}
).append($('<img/>',{
src:this.options.fileLoadingImage}
))))),$('<div/>',{
"class":'lb-dataContainer'}
).append($('<div/>',{
"class":'lb-data'}
).append($('<div/>',{
"class":'lb-details'}
).append($('<span/>',{
"class":'lb-caption'}
),$('<span/>',{
"class":'lb-number'}
)),$('<div/>',{
"class":'lb-closeContainer'}
).append($('<a/>',{
"class":'lb-close'}
).append($('<img/>',{
src:this.options.fileCloseImage}
))))))).appendTo($('body'));
$('#lightboxOverlay').hide().on('click',function(e){
_this.end();
return false;
}
);
$lightbox = $('#lightbox');
$lightbox.hide().on('click',function(e){
if ($(e.target).attr('id') === 'lightbox') _this.end();
return false;
}
);
$lightbox.find('.lb-outerContainer').on('click',function(e){
if ($(e.target).attr('id') === 'lightbox') _this.end();
return false;
}
);
$lightbox.find('.lb-prev').on('click',function(e){
_this.changeImage(_this.currentImageIndex - 1);
return false;
}
);
$lightbox.find('.lb-next').on('click',function(e){
_this.changeImage(_this.currentImageIndex + 1);
return false;
}
);
$lightbox.find('.lb-loader,.lb-close').on('click',function(e){
_this.end();
return false;
}
);
}
;
Lightbox.prototype.start = function($link){
var $lightbox,$window,a,i,imageNumber,left,top,_len,_ref;
$(window).on("resize",this.sizeOverlay);
$('select,object,embed').css({
visibility:"hidden"}
);
$('#lightboxOverlay').width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration);
this.album = [];
imageNumber = 0;
if ($link.attr('rel') === 'lightbox'){
this.album.push({
link:$link.attr('href'),title:$link.attr('title')}
);
}
else{
_ref = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
for (i = 0,_len = _ref.length;
i < _len;
i++){
a = _ref[i];
this.album.push({
link:$(a).attr('href'),title:$(a).attr('title')}
);
if ($(a).attr('href') === $link.attr('href')) imageNumber = i;
}
}
$window = $(window);
top = $window.scrollTop() + $window.height() / 10;
left = $window.scrollLeft();
$lightbox = $('#lightbox');
$lightbox.css({
top:top + 'px',left:left + 'px'}
).fadeIn(this.options.fadeDuration);
this.changeImage(imageNumber);
}
;
Lightbox.prototype.changeImage = function(imageNumber){
var $image,$lightbox,preloader,_this = this;
this.disableKeyboardNav();
$lightbox = $('#lightbox');
$image = $lightbox.find('.lb-image');
this.sizeOverlay();
$('#lightboxOverlay').fadeIn(this.options.fadeDuration);
$('.loader').fadeIn('slow');
$lightbox.find('.lb-image,.lb-nav,.lb-prev,.lb-next,.lb-dataContainer,.lb-numbers,.lb-caption').hide();
$lightbox.find('.lb-outerContainer').addClass('animating');
preloader = new Image;
preloader.onload = function(){
$image.attr('src',_this.album[imageNumber].link);
$image.width = preloader.width;
$image.height = preloader.height;
return _this.sizeContainer(preloader.width,preloader.height);
}
;
preloader.src = this.album[imageNumber].link;
this.currentImageIndex = imageNumber;
}
;
Lightbox.prototype.sizeOverlay = function(){
return $('#lightboxOverlay').width($(document).width()).height($(document).height());
}
;
Lightbox.prototype.sizeContainer = function(imageWidth,imageHeight){
var $container,$lightbox,$outerContainer,containerBottomPadding,containerLeftPadding,containerRightPadding,containerTopPadding,newHeight,newWidth,oldHeight,oldWidth,_this = this;
$lightbox = $('#lightbox');
$outerContainer = $lightbox.find('.lb-outerContainer');
oldWidth = $outerContainer.outerWidth();
oldHeight = $outerContainer.outerHeight();
$container = $lightbox.find('.lb-container');
containerTopPadding = parseInt($container.css('padding-top'),10);
containerRightPadding = parseInt($container.css('padding-right'),10);
containerBottomPadding = parseInt($container.css('padding-bottom'),10);
containerLeftPadding = parseInt($container.css('padding-left'),10);
newWidth = imageWidth + containerLeftPadding + containerRightPadding;
newHeight = imageHeight + containerTopPadding + containerBottomPadding;
if (newWidth !== oldWidth && newHeight !== oldHeight){
$outerContainer.animate({
width:newWidth,height:newHeight}
,this.options.resizeDuration,'swing');
}
else if (newWidth !== oldWidth){
$outerContainer.animate({
width:newWidth}
,this.options.resizeDuration,'swing');
}
else if (newHeight !== oldHeight){
$outerContainer.animate({
height:newHeight}
,this.options.resizeDuration,'swing');
}
setTimeout(function(){
$lightbox.find('.lb-dataContainer').width(newWidth);
$lightbox.find('.lb-prevLink').height(newHeight);
$lightbox.find('.lb-nextLink').height(newHeight);
_this.showImage();
}
,this.options.resizeDuration);
}
;
Lightbox.prototype.showImage = function(){
var $lightbox;
$lightbox = $('#lightbox');
$lightbox.find('.lb-loader').hide();
$lightbox.find('.lb-image').fadeIn('slow');
this.updateNav();
this.updateDetails();
this.preloadNeighboringImages();
this.enableKeyboardNav();
}
;
Lightbox.prototype.updateNav = function(){
var $lightbox;
$lightbox = $('#lightbox');
$lightbox.find('.lb-nav').show();
if (this.currentImageIndex > 0) $lightbox.find('.lb-prev').show();
if (this.currentImageIndex < this.album.length - 1){
$lightbox.find('.lb-next').show();
}
}
;
Lightbox.prototype.updateDetails = function(){
var $lightbox,_this = this;
$lightbox = $('#lightbox');
if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== ""){
$lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast');
}
if (this.album.length > 1){
$lightbox.find('.lb-number').html(this.options.labelImage + ' ' + (this.currentImageIndex + 1) + ' ' + this.options.labelOf + ' ' + this.album.length).fadeIn('fast');
}
else{
$lightbox.find('.lb-number').hide();
}
$lightbox.find('.lb-outerContainer').removeClass('animating');
$lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration,function(){
return _this.sizeOverlay();
}
);
}
;
Lightbox.prototype.preloadNeighboringImages = function(){
var preloadNext,preloadPrev;
if (this.album.length > this.currentImageIndex + 1){
preloadNext = new Image;
preloadNext.src = this.album[this.currentImageIndex + 1].link;
}
if (this.currentImageIndex > 0){
preloadPrev = new Image;
preloadPrev.src = this.album[this.currentImageIndex - 1].link;
}
}
;
Lightbox.prototype.enableKeyboardNav = function(){
$(document).on('keyup.keyboard',$.proxy(this.keyboardAction,this));
}
;
Lightbox.prototype.disableKeyboardNav = function(){
$(document).off('.keyboard');
}
;
Lightbox.prototype.keyboardAction = function(event){
var KEYCODE_ESC,KEYCODE_LEFTARROW,KEYCODE_RIGHTARROW,key,keycode;
KEYCODE_ESC = 27;
KEYCODE_LEFTARROW = 37;
KEYCODE_RIGHTARROW = 39;
keycode = event.keyCode;
key = String.fromCharCode(keycode).toLowerCase();
if (keycode === KEYCODE_ESC || key.match(/x|o|c/)){
this.end();
}
else if (key === 'p' || keycode === KEYCODE_LEFTARROW){
if (this.currentImageIndex !== 0){
this.changeImage(this.currentImageIndex - 1);
}
}
else if (key === 'n' || keycode === KEYCODE_RIGHTARROW){
if (this.currentImageIndex !== this.album.length - 1){
this.changeImage(this.currentImageIndex + 1);
}
}
}
;
Lightbox.prototype.end = function(){
this.disableKeyboardNav();
$(window).off("resize",this.sizeOverlay);
$('#lightbox').fadeOut(this.options.fadeDuration);
$('#lightboxOverlay').fadeOut(this.options.fadeDuration);
return $('select,object,embed').css({
visibility:"visible"}
);
}
;
return Lightbox;
}
)();
$(function(){
var lightbox,options;
options = new LightboxOptions;
return lightbox = new Lightbox(options);
}
);
}
).call(this);
CSS代码(lightbox.css):
/* line 6,../sass/lightbox.sass */
#lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:black;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=85);opacity:0.85;display:none;}
/* line 15,../sass/lightbox.sass */
#lightbox{position:absolute;left:0;width:100%;z-index:10000;text-align:center;line-height:0;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-weight:normal;}
/* line 24,../sass/lightbox.sass */
#lightbox img{width:auto;height:auto;}
/* line 27,../sass/lightbox.sass */
#lightbox a img{border:none;}
/* line 30,../sass/lightbox.sass */
.lb-outerContainer{position:relative;background-color:white;*zoom:1;width:250px;height:250px;margin:0 auto;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;}
/* line 38,../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-outerContainer:after{content:"";display:table;clear:both;}
/* line 39,../sass/lightbox.sass */
.lb-container{padding:10px;}
/* line 42,../sass/lightbox.sass */
.lb-loader{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0;}
/* line 51,../sass/lightbox.sass */
.lb-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10;}
/* line 59,../sass/lightbox.sass */
.lb-container > .nav{left:0;}
/* line 62,../sass/lightbox.sass */
.lb-nav a{outline:none;}
/* line 65,../sass/lightbox.sass */
.lb-prev,.lb-next{width:49%;height:100%;background-image:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");/* Trick IE into showing hover */
display:block;}
/* line 72,../sass/lightbox.sass */
.lb-prev{left:0;float:left;}
/* line 76,../sass/lightbox.sass */
.lb-next{right:0;float:right;}
/* line 81,../sass/lightbox.sass */
.lb-prev:hover{background:url(../images/prev.png) left 48% no-repeat;}
/* line 85,../sass/lightbox.sass */
.lb-next:hover{background:url(../images/next.png) right 48% no-repeat;}
/* line 88,../sass/lightbox.sass */
.lb-dataContainer{margin:0 auto;padding-top:5px;*zoom:1;width:100%;-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;-ms-border-bottom-left-radius:4px;-o-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;-ms-border-bottom-right-radius:4px;-o-border-bottom-right-radius:4px;border-bottom-right-radius:4px;}
/* line 38,../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-dataContainer:after{content:"";display:table;clear:both;}
/* line 95,../sass/lightbox.sass */
.lb-data{padding:0 10px;color:#bbbbbb;}
/* line 98,../sass/lightbox.sass */
.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em;}
/* line 103,../sass/lightbox.sass */
.lb-data .lb-caption{font-size:13px;font-weight:bold;line-height:1em;}
/* line 107,../sass/lightbox.sass */
.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:11px;}
/* line 112,../sass/lightbox.sass */
.lb-data .lb-close{width:35px;float:right;padding-bottom:0.7em;outline:none;}
/* line 117,../sass/lightbox.sass */
.lb-data .lb-close:hover{cursor:pointer;}
分享到QQ
分享到微博
微信扫一扫
