Skip to content
This repository has been archived by the owner on Apr 15, 2021. It is now read-only.

Commit

Permalink
v1.1
Browse files Browse the repository at this point in the history 
 * [New] Added the clickOverlayToClose setting
 * [New] Uppercase image extensions are now supported
 * [Fixed] Can't click anywhere after opening video bug
 * [Fixed] Doesn't work in iOS bug
 * [Fixed] Youtube hyphen in URL bug
 * [Fixed] Inline content overflow bug
  • Loading branch information
@gilbitron
gilbitron committed Dec 11, 2013
1 parent 77dbbae commit 7e884a4
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 56 deletions.
8 changes: 8 additions & 0 deletions changelog.txt
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
*** Nivo Lightbox Changelog ***

2013.12.11 - version 1.1
* [New] Added the clickOverlayToClose setting
* [New] Uppercase image extensions are now supported
* [Fixed] Can't click anywhere after opening video bug
* [Fixed] Doesn't work in iOS bug
* [Fixed] Youtube hyphen in URL bug
* [Fixed] Inline content overflow bug

2013.08.01 - version 1.0
* Initial release
27 changes: 14 additions & 13 deletions nivo-lightbox.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
/*
* Nivo Lightbox v1.0
* Nivo Lightbox v1.1
* http://dev7studios.com/nivo-lightbox
*
* Copyright 2013, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/

.nivo-lightbox-overlay {
position: fixed;
top: 0;
Expand All @@ -21,7 +21,7 @@
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nivo-lightbox-overlay.nivo-lightbox-open {
.nivo-lightbox-overlay.nivo-lightbox-open {
visibility: visible;
opacity: 1;
}
Expand Down Expand Up @@ -73,9 +73,10 @@
width: 100%;
height: 100%;
}
.nivo-lightbox-ajax {
.nivo-lightbox-inline,
.nivo-lightbox-ajax {
max-height: 100%;
overflow: auto;
overflow: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Expand All @@ -94,15 +95,15 @@
vertical-align: middle;
}

/* Effects
/* Effects
**********************************************/
.nivo-lightbox-effect-fade,
.nivo-lightbox-effect-fadeScale,
.nivo-lightbox-effect-slideLeft,
.nivo-lightbox-effect-slideRight,
.nivo-lightbox-effect-slideUp,
.nivo-lightbox-effect-slideDown,
.nivo-lightbox-effect-fall {
.nivo-lightbox-notouch .nivo-lightbox-effect-fade,
.nivo-lightbox-notouch .nivo-lightbox-effect-fadeScale,
.nivo-lightbox-notouch .nivo-lightbox-effect-slideLeft,
.nivo-lightbox-notouch .nivo-lightbox-effect-slideRight,
.nivo-lightbox-notouch .nivo-lightbox-effect-slideUp,
.nivo-lightbox-notouch .nivo-lightbox-effect-slideDown,
.nivo-lightbox-notouch .nivo-lightbox-effect-fall {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
Expand Down
98 changes: 55 additions & 43 deletions nivo-lightbox.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* Nivo Lightbox v1.0
* Nivo Lightbox v1.1
* http://dev7studios.com/nivo-lightbox
*
* Copyright 2013, Dev7studios
Expand All @@ -14,6 +14,7 @@
effect: 'fade',
theme: 'default',
keyboardNav: true,
clickOverlayToClose: true,
onInit: function(){},
beforeShowLightbox: function(){},
afterShowLightbox: function(lightbox){},
Expand All @@ -37,15 +38,20 @@
}

NivoLightbox.prototype = {

init: function(){
var $this = this;


// Need this so we don't use CSS transitions in mobile
if(!$('html').hasClass('nivo-lightbox-notouch')) $('html').addClass('nivo-lightbox-notouch');
if('ontouchstart' in document) $('html').removeClass('nivo-lightbox-notouch');

// Setup the click
this.$el.on('click', function(e){
e.preventDefault();
$this.showLightbox();
});

// keyboardNav
if(this.options.keyboardNav){
$('body').off('keyup').on('keyup', function(e){
Expand All @@ -66,7 +72,7 @@
showLightbox: function(){
var $this = this;
this.options.beforeShowLightbox.call(this);

var lightbox = this.constructLightbox();
if(!lightbox) return;
var content = lightbox.find('.nivo-lightbox-content');
Expand All @@ -76,12 +82,12 @@

// Add content
this.processContent(content, currentLink);

// Nav
if(this.$el.attr('data-lightbox-gallery')){
var $this = this,
galleryItems = $('[data-lightbox-gallery="'+ this.$el.attr('data-lightbox-gallery') +'"]');

$('.nivo-lightbox-nav').show();

// Prev
Expand All @@ -93,7 +99,7 @@
$this.processContent(content, currentLink);
$this.options.onPrev.call(this, [ currentLink ]);
});

// Next
$('.nivo-lightbox-next').off('click').on('click', function(e){
e.preventDefault();
Expand All @@ -104,31 +110,31 @@
$this.options.onNext.call(this, [ currentLink ]);
});
}

setTimeout(function(){
lightbox.addClass('nivo-lightbox-open');
$this.options.afterShowLightbox.call(this, [ lightbox ]);
}, 1); // For CSS transitions
},

processContent: function(content, link){
var $this = this;
var href = link.attr('href');
content.html('').addClass('nivo-lightbox-loading');

// Is HiDPI?
if(this.isHidpi() && link.attr('data-lightbox-hidpi')){
href = link.attr('data-lightbox-hidpi');
}

// Image
if(href.match(/\.(jpeg|jpg|gif|png)$/) != null){
if(href.match(/\.(jpeg|jpg|gif|png)$/i) != null){
var img = $('<img>', { src: href });
img.one('load', function() {
var wrap = $('<div class="nivo-lightbox-image" />');
wrap.append(img);
content.html(wrap).removeClass('nivo-lightbox-loading');

// Vertically center images
wrap.css({
'line-height': $('.nivo-lightbox-content').height() +'px',
Expand All @@ -143,17 +149,17 @@
}).each(function() {
if(this.complete) $(this).load();
});

img.error(function() {
var wrap = $('<div class="nivo-lightbox-error"><p>'+ $this.options.errorMessage +'</p></div>');
content.html(wrap).removeClass('nivo-lightbox-loading');
});
}
// Video (Youtube/Vimeo)
else if(video = href.match(/(youtube|youtu|vimeo)\.(com|be)\/(watch\?v=(\w+)|(\w+))/)){
else if(video = href.match(/(youtube|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/)){
var src = '',
classTerm = 'nivo-lightbox-video';

if(video[1] == 'youtube'){
src = 'http://www.youtube.com/v/'+ video[4];
classTerm = 'nivo-lightbox-youtube';
Expand All @@ -166,10 +172,10 @@
src = 'http://player.vimeo.com/video/'+ video[3];
classTerm = 'nivo-lightbox-vimeo';
}

if(src){
var iframe = $('<iframe>', {
src: src,
var iframe = $('<iframe>', {
src: src,
'class': classTerm,
frameborder: 0,
vspace: 0,
Expand All @@ -190,7 +196,7 @@
var wrap = $('<div class="nivo-lightbox-ajax" />');
wrap.append(data);
content.html(wrap).removeClass('nivo-lightbox-loading');

// Vertically center html
if(wrap.outerHeight() < content.height()){
wrap.css({
Expand Down Expand Up @@ -221,7 +227,7 @@
var wrap = $('<div class="nivo-lightbox-inline" />');
wrap.append($(href).clone().show());
content.html(wrap).removeClass('nivo-lightbox-loading');

// Vertically center html
if(wrap.outerHeight() < content.height()){
wrap.css({
Expand All @@ -246,8 +252,8 @@
}
// iFrame (default)
else {
var iframe = $('<iframe>', {
src: href,
var iframe = $('<iframe>', {
src: href,
'class': 'nivo-lightbox-item',
frameborder: 0,
vspace: 0,
Expand All @@ -257,7 +263,7 @@
content.html(iframe);
iframe.load(function(){ content.removeClass('nivo-lightbox-loading'); });
}

// Set the title
if(link.attr('title')){
var titleWrap = $('<span>', { 'class': 'nivo-lightbox-title' });
Expand All @@ -267,63 +273,69 @@
$('.nivo-lightbox-title-wrap').html('');
}
},

constructLightbox: function(){
if($('.nivo-lightbox-overlay').length) return $('.nivo-lightbox-overlay');

var overlay = $('<div>', { 'class': 'nivo-lightbox-overlay nivo-lightbox-theme-'+ this.options.theme +' nivo-lightbox-effect-'+ this.options.effect });
var wrap = $('<div>', { 'class': 'nivo-lightbox-wrap' });
var content = $('<div>', { 'class': 'nivo-lightbox-content' });
var nav = $('<a href="#" class="nivo-lightbox-nav nivo-lightbox-prev">Previous</a><a href="#" class="nivo-lightbox-nav nivo-lightbox-next">Next</a>');
var close = $('<a href="#" class="nivo-lightbox-close" title="Close">Close</a>');
var title = $('<div>', { 'class': 'nivo-lightbox-title-wrap' });

var isMSIE = /*@cc_on!@*/0;
if(isMSIE) overlay.addClass('nivo-lightbox-ie');

wrap.append(content);
wrap.append(title);
overlay.append(wrap);
overlay.append(nav);
overlay.append(close);
$('body').append(overlay);

var $this = this;
overlay.on('click', function(e){
if(e.target === this ||
$(e.target).hasClass('nivo-lightbox-content') ||
$(e.target).hasClass('nivo-lightbox-image')) $this.destructLightbox();
});
if($this.options.clickOverlayToClose){
overlay.on('click', function(e){
if(e.target === this ||
$(e.target).hasClass('nivo-lightbox-content') ||
$(e.target).hasClass('nivo-lightbox-image')) $this.destructLightbox();
});
}

close.on('click', function(e){
e.preventDefault();
$this.destructLightbox();
});

return overlay;
},

destructLightbox: function(){
var $this = this;
this.options.beforeHideLightbox.call(this);

$('.nivo-lightbox-overlay').removeClass('nivo-lightbox-open');
$('.nivo-lightbox-nav').hide();
$('body').removeClass('nivo-lightbox-body-effect-'+ $this.options.effect);

// For IE
var isMSIE = /*@cc_on!@*/0;
if(isMSIE){
$('.nivo-lightbox-overlay iframe').attr("src", " ");
$('.nivo-lightbox-overlay iframe').remove();
}

// Remove click handlers
$('.nivo-lightbox-prev').off('click');
$('.nivo-lightbox-next').off('click');


// Empty content (for videos)
$('.nivo-lightbox-content').empty();

this.options.afterHideLightbox.call(this);
},

isHidpi: function(){
var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
(min--moz-device-pixel-ratio: 1.5),\
Expand All @@ -333,7 +345,7 @@
if(window.matchMedia && window.matchMedia(mediaQuery).matches) return true;
return false;
}

};

$.fn[pluginName] = function(options){
Expand Down

0 comments on commit 7e884a4

Please sign in to comment.