以下是 jQuery灯箱弹出窗口插件litebox js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="no-js ie ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="no-js ie ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"><![endif]-->
<!--[if IE 9 ]><html class="no-js ie ie9" lang="en"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" class="no-js"><!--<![endif]-->
<head>
<!-- Meta Data -->
<title>jQuery���䵯�����ڲ��litebox</title>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Stylesheets -->
<!--<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" media="all" />-->
<link href="assets/css/normalize.css" rel="stylesheet" type="text/css" media="all" />
<link href="assets/css/litebox.css" rel="stylesheet" type="text/css" media="all" />
<link href="assets/css/style.min.css" rel="stylesheet" type="text/css" media="all" />
<!-- HTML5 SHIV -->
<!--[if lt IE 9]>
<script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="http://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body itemscope itemtype="#">
<!-- No JavaScript -->
<noscript>
<div class="container text-center">
<div id="no-script">
<p class="bm-smaller"><strong>JavaScript Disabled</strong></p>
<p class="bm-smaller">Certain features of this site may not function correctly without JavaScript enabled</p>
<p class="bm-remove">Find out how to enable JavaScript in your browser</p>
</div>
</div>
</noscript>
<!-- Content -->
<div class="container">
<div class="one-whole text-center">
<h3>Single Images</h3>
<p>
<a href="assets/imgs/001.jpg" target="_self" class="inline-block litebox"><img src="assets/imgs/001-thumb.jpg" class="inline-block" /></a>
<a href="assets/imgs/002.jpg" target="_self" class="inline-block litebox"><img src="assets/imgs/002-thumb.jpg" class="inline-block" /></a>
<a href="assets/imgs/003.jpg" target="_self" class="inline-block litebox"><img src="assets/imgs/003-thumb.jpg" class="inline-block" /></a>
<a href="assets/imgs/004.jpg" target="_self" class="inline-block litebox"><img src="assets/imgs/004-thumb.jpg" class="inline-block" /></a>
</p>
<p><small>Image Credits: Little Visuals</small></p>
<hr class="bm-larger tm-large" />
<h3>Gallery Images</h3>
<p>
<a href="assets/imgs/004.jpg" target="_self" class="inline-block litebox" data-litebox-group="group-1"><img src="assets/imgs/004-thumb.jpg" class="inline-block" /></a>
<a href="assets/imgs/003.jpg" target="_self" class="inline-block litebox" data-litebox-group="group-1"><img src="assets/imgs/003-thumb.jpg" class="inline-block" /></a>
<a href="assets/imgs/002.jpg" target="_self" class="inline-block litebox" data-litebox-group="group-1"><img src="assets/imgs/002-thumb.jpg" class="inline-block" /></a>
<a href="assets/imgs/001.jpg" target="_self" class="inline-block litebox" data-litebox-group="group-1"><img src="assets/imgs/001-thumb.jpg" class="inline-block" /></a>
</p>
<p><small>Image Credits: Unsplash</small></p>
<hr class="bm-larger tm-large" />
<h3>Embedded Content</h3>
<a href="https://www.youtube.com/watch?v=gOLY7bjCTTE" target="_self" class="button litebox" data-litebox-group="group-2">YouTube</a>
<a href="http://vimeo.com/45427826" target="_self" class="button litebox" data-litebox-group="group-2">Vimeo</a>
<a href="http://www.dailymotion.com/video/x15wmv4_alexander-rusinov-extreme-workout_sport" target="_self" class="button litebox" data-litebox-group="group-2">Daily Motion</a>
<a href="https://www.kickstarter.com/projects/1523379957/oculus-rift-step-into-the-game/" target="_self" class="button litebox" data-litebox-group="group-2">KickStarter</a>
<hr class="bm-larger tm-large" />
<h3>Others</h3>
<a href="#" target="_self" class="button litebox" data-litebox-group="group-3">Iframe</a>
<a href="#" target="_self" class="button litebox" data-litebox-group="group-3">Iframe2</a>
<a href="#inline-html-1" target="_self" class="button litebox" data-litebox-group="group-3">Inline HTML 1</a>
<a href="#inline-html-2" target="_self" class="button litebox" data-litebox-group="group-3">Inline HTML 2</a>
<div class="no-display">
<div id="inline-html-1">
<h1 class="bm-large tm-large">Inline HTML Example</h1>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
</div>
<div id="inline-html-2">
<h1 class="bm-large tm-large">Scrollable Inline HTML Example</h1>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
</div>
</div>
</div>
<hr class="bm-larger" />
</div>
<!-- Footer -->
<div class="container text-right">
<p><a href="#" target="_self" class="scroll-to-top">SCROLL TO TOP</a></p>
</div>
<!-- JavaScript -->
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="assets/js/smoothscroll.js" type="text/javascript"></script>
<script src="assets/js/images-loaded.min.js" type="text/javascript"></script>
<script src="assets/js/litebox.js" type="text/javascript"></script>
<script src="assets/js/backbone.js" type="text/javascript"></script>
<script type="text/javascript">
$('.litebox').liteBox();
</script>
</body>
</html>
JS代码(litebox.js):
//LiteBox v1.1,Copyright 2014,Joe Mottershaw,https://github.com/joemottershaw///===============================================================================;
(function($,window,document,undefined){
var pluginName = 'liteBox',defaults ={
revealSpeed:400,background:'rgba(0,0,0,.8)',overlayClose:true,escKey:true,navKey:true,callbackInit:function(){
}
,callbackBeforeOpen:function(){
}
,callbackAfterOpen:function(){
}
,callbackBeforeClose:function(){
}
,callbackAfterClose:function(){
}
,callbackError:function(){
}
,callbackPrev:function(){
}
,callbackNext:function(){
}
,errorMessage:'Error loading content.'}
;
function liteBox(element,options){
this.element = element;
this.$element = $(this.element);
this.options = $.extend({
}
,defaults,options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
function winHeight(){
return window.innerHeight ? window.innerHeight:$(window).height();
}
function preloadImageArray(images){
$(images).each(function (){
var image = new Image();
image.src = this;
if (image.width > 0)$('<img />').attr('src',this).addClass('litebox-preload').appendTo('body').hide();
}
);
}
liteBox.prototype ={
init:function(){
// Variablesvar$this = this;
// Element clickthis.$element.on('click',function(e){
e.preventDefault();
$this.openLitebox();
}
);
// InteractionkeyEsc = 27,keyLeft = 37,keyRight = 39;
$('body').off('keyup').on('keyup',function(e){
if ($this.options.escKey && e.keyCode == keyEsc)$this.closeLitebox();
if ($this.options.navKey && e.keyCode == keyLeft)$('.litebox-prev').trigger('click');
if ($this.options.navKey && e.keyCode == keyRight)$('.litebox-next').trigger('click');
}
);
// Callbackthis.options.callbackInit.call(this);
}
,openLitebox:function(){
// Variablesvar $this = this;
// Before callbackthis.options.callbackBeforeOpen.call(this);
// Build$this.buildLitebox();
// Populatevarlink = this.$element;
$this.populateLitebox(link);
// Interactionsif ($this.options.overlayClose)$litebox.on('click',function(e){
if (e.target === this || $(e.target).hasClass('litebox-container') || $(e.target).hasClass('litebox-error'))$this.closeLitebox();
}
);
$close.on('click',function(){
$this.closeLitebox();
}
);
// Groupsif (this.$element.attr('data-litebox-group')){
var$this = this,groupName = this.$element.attr('data-litebox-group'),group = $('[data-litebox-group="' + this.$element.attr('data-litebox-group') + '"]');
var imageArray = [];
$('[data-litebox-group="' + groupName + '"]').each(function(){
var src = $(this).attr('href');
imageArray.push(src);
}
);
preloadImageArray(imageArray);
$('.litebox-nav').show();
$prevNav.off('click').on('click',function(){
$this.options.callbackPrev.call(this);
var index = group.index(link);
link = group.eq(index - 1);
if (!$(link).length)link = group.last();
$this.populateLitebox(link);
}
);
$nextNav.off('click').on('click',function(){
$this.options.callbackNext.call(this);
var index = group.index(link);
link = group.eq(index + 1);
if (!$(link).length)link = group.first();
$this.populateLitebox(link);
}
);
}
// After callbackthis.options.callbackAfterOpen.call(this);
}
,buildLitebox:function(){
// Variablesvar $this = this;
$litebox = $('<div>',{
'class':'litebox-overlay'}
),$close = $('<div>',{
'class':'litebox-close'}
),$error = $('<div class="litebox-error"><span>' + this.options.errorMessage + '</span></div>'),$prevNav = $('<div>',{
'class':'litebox-nav litebox-prev'}
),$nextNav = $('<div>',{
'class':'litebox-nav litebox-next'}
),$container = $('<div>',{
'class':'litebox-container'}
),$loader = $('<div>',{
'class':'litebox-loader'}
);
// Insert into document$('body').prepend($litebox.css({
'background-color':this.options.background}
));
$litebox.append($close,$prevNav,$nextNav,$container);
$litebox.fadeIn(this.options.revealSpeed);
}
,populateLitebox:function(link){
// Variablesvar$this = this,href = link.attr('href'),$currentContent = $('.litebox-content');
// Show loader$litebox.append($loader);
// Processif (href.match(/\.(jpeg|jpg|gif|png|bmp)/i) !== null){
var $img = $('<img>',{
'src':href,'class':'litebox-content'}
);
$this.transitionContent('image',$currentContent,$img);
$('img.litebox-content').imagesLoaded(function(){
$loader.remove();
}
);
$img.error(function(){
$this.liteboxError();
$loader.remove();
}
);
}
else if (videoURL = href.match(/(youtube|youtu|vimeo|dailymotion|kickstarter)\.(com|be)\/((watch\?v=([-\w]+))|(video\/([-\w]+))|(projects\/([-\w]+)\/([-\w]+))|([-\w]+))/)){
var src = '';
if (videoURL[1] == 'youtube')src = 'http://www.youtube.com/v/' + videoURL[5];
if (videoURL[1] == 'youtu')src = 'http://www.youtube.com/v/' + videoURL[3];
if (videoURL[1] == 'vimeo')src = 'http://player.vimeo.com/video/' + videoURL[3];
if (videoURL[1] == 'dailymotion')src = 'https://www.dailymotion.com/embed/video/' + videoURL[7];
if (videoURL[1] == 'kickstarter')src = 'https://www.kickstarter.com/projects/' + videoURL[9] + '/' + videoURL[10] + '/widget/video.html';
if (src){
var $iframe = $('<iframe>',{
'src':src,'frameborder':'0','vspace':'0','hspace':'0','scrolling':'no','allowfullscreen':'','class':'litebox-content','style':'background:#000'}
);
$this.transitionContent('embed',$currentContent,$iframe);
$iframe.load(function(){
$loader.remove();
}
);
}
}
else if (href.substring(0,1) == '#'){
if ($(href).length){
$html = $('<div>',{
'class':'litebox-content litebox-inline-html'}
);
$html.append($(href).clone());
$this.transitionContent('inline',$currentContent,$html);
}
else{
$this.liteboxError();
}
$loader.remove();
}
else{
var $iframe = $('<iframe>',{
'src':href,'frameborder':'0','vspace':'0','hspace':'0','scrolling':'auto','class':'litebox-content','allowfullscreen':''}
);
$this.transitionContent('iframe',$currentContent,$iframe);
$iframe.load(function(){
$loader.remove();
}
);
}
}
,transitionContent:function(type,$currentContent,$newContent){
// Variablesvar$this = this;
if (type != 'inline')$container.removeClass('litebox-scroll');
// Transition$currentContent.remove();
$container.append($newContent);
if (type == 'inline')$container.addClass('litebox-scroll');
$this.centerContent();
$(window).on('resize',function(){
$this.centerContent();
}
);
}
,centerContent:function(){
// Overlay to viewport$litebox.css({
'height':winHeight()}
);
// Images$container.css({
'line-height':$container.height() + 'px'}
);
// Inlineif (typeof $html != 'undefined' && $('.litebox-inline-html').outerHeight() < $container.height())$('.litebox-inline-html').css({
'margin-top':'-' + ($('.litebox-inline-html').outerHeight()) / 2 + 'px','top':'50%'}
);
}
,closeLitebox:function(){
// Before callbackthis.options.callbackBeforeClose.call(this);
// Remove$litebox.fadeOut(this.options.revealSpeed,function(){
$('.litebox-nav').hide();
$litebox.empty().remove();
$('.litebox-preload').remove();
}
);
// Remove click handlers$('.litebox-prev').off('click');
$('.litebox-next').off('click');
// After callbackthis.options.callbackAfterClose.call(this);
}
,liteboxError:function(){
this.options.callbackError.call(this);
$container.append($error);
}
}
;
$.fn[pluginName] = function(options){
return this.each(function(){
if (!$.data(this,pluginName))$.data(this,pluginName,new liteBox(this,options));
}
);
}
;
}
)(jQuery,window,document);
CSS代码(litebox.css):
/*LiteBox v1.1,Copyright 2014,Joe Mottershaw,https://github.com/joemottershaw///=============================================================================== */
/*Table of Contents//==================================================//#Default/*#Default//================================================== */
.litebox-overlay{display:none;width:100%;min-width:280px;text-align:center;position:fixed;top:0;left:0;z-index:9999;}
@-webkit-keyframes liteboxLoader{0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes liteboxLoader{0%{-moz-transform:rotate(0deg);}
100%{-moz-transform:rotate(360deg);}
}
@-ms-keyframes liteboxLoader{0%{-ms-transform:rotate(0deg);}
100%{-ms-transform:rotate(360deg);}
}
@-o-keyframes liteboxLoader{0%{-o-transform:rotate(0deg);}
100%{-o-transform:rotate(360deg);}
}
@keyframes liteboxLoader{0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
.litebox-overlay .litebox-loader{position:absolute;width:40px;height:40px;left:20px;top:20px;border:3px solid #111;border-right-color:#fff;border-radius:50%;-webkit-animation:liteboxLoader 1s linear infinite;-moz-animation:liteboxLoader 1s linear infinite;-ms-animation:liteboxLoader 1s linear infinite;-o-animation:liteboxLoader 1s linear infinite;animation:liteboxLoader 1s linear infinite;}
.litebox-overlay .litebox-close{width:40px;height:40px;background:url('../imgs/litebox-close.png') no-repeat center;opacity:.7;position:absolute;top:20px;right:20px;}
.litebox-overlay .litebox-close:hover{opacity:1;cursor:pointer;}
.litebox-overlay .litebox-nav{display:none;width:60px;height:60px;margin-top:-30px;opacity:.2;position:absolute;top:50%;}
.litebox-overlay .litebox-nav:hover{opacity:.5;cursor:pointer;}
.litebox-overlay .litebox-prev{background:url('../imgs/litebox-prev.png') no-repeat center;left:20px;}
.litebox-overlay .litebox-next{background:url('../imgs/litebox-next.png') no-repeat center;right:20px;}
.litebox-overlay .litebox-container{position:absolute;top:10%;right:10%;bottom:10%;left:10%;overflow:hidden;}
.litebox-overlay .litebox-container.litebox-scroll{overflow-y:auto;}
.litebox-overlay img,.litebox-overlay iframe{display:inline-block;max-width:100%;max-height:100%;margin:0 auto;vertical-align:middle;overflow-x:hidden;}
.litebox-overlay iframe{width:100%;height:100%;position:relative;z-index:999999;}
.litebox-overlay .litebox-inline-html{width:100%;padding:20px;background:#FFF;line-height:normal;overflow-x:hidden;line-height:normal !important;position:absolute;}
.litebox-overlay .litebox-error{width:100%;height:100%;color:#FFF;text-align:center;line-height:inherit;}
.litebox-overlay .litebox-error span{background:rgba(0,0,0,.9);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding:20px;color:#FFF;text-shadow:1px 1px 0 #000;line-height:normal;}
分享到QQ
分享到微博
微信扫一扫
