diff --git a/jquery.lightbox.css b/jquery.lightbox.css index 25e4332..153622c 100644 --- a/jquery.lightbox.css +++ b/jquery.lightbox.css @@ -11,6 +11,7 @@ -webkit-filter: none !important; z-index: 9997; } + .lightbox img { display: block; position: absolute; @@ -18,20 +19,23 @@ box-shadow: 0 0 20px #000; border-radius: 1px; } + body.blurred > * { -webkit-filter: blur(2px); -webkit-transform: translate3d(0, 0, 0); } -.lightbox-loading { + +.lightbox__loading { background: url(loading.gif) center center no-repeat; - width: 31px; - height: 31px; + width: 32px; + height: 32px; margin: -16px 0 0 -16px; position: absolute; - top: 48%; + top: 50%; left: 50%; } -.lightbox-caption { + +.lightbox__caption { display: none; position: absolute; left: 0; @@ -43,7 +47,7 @@ body.blurred > * { background: rgba(0,0,0,0.7); } -.lightbox-caption p { +.lightbox__caption p { margin: 0 auto; max-width: 70%; display: inline-block; @@ -55,7 +59,7 @@ body.blurred > * { line-height: 18px; } -.lightbox-button { +.lightbox__button { position: absolute; z-index: 9999; background: no-repeat center center; @@ -68,8 +72,8 @@ body.blurred > * { transition: all 0.3s; } -.lightbox-button:hover, -.lightbox-button:focus { +.lightbox__button:hover, +.lightbox__button:focus { opacity: 1; -webkit-transform: scale(1.4); -moz-transform: scale(1.4); @@ -77,18 +81,24 @@ body.blurred > * { transform: scale(1.4); } -.lightbox-close { +.lightbox__close { right: 10px; top: 10px; background-image: url('close.png'); } -.lightbox-next { + +.lightbox__nav { + top: 50%; + margin-top: -16px; +} + +.lightbox__nav--next { right: 10px; - top: 48%; background-image: url('next.png'); } -.lightbox-previous { + +.lightbox__nav--prev { left: 10px; - top: 48%; background-image: url('previous.png'); } +} \ No newline at end of file diff --git a/jquery.lightbox.js b/jquery.lightbox.js index 5087ada..4c80ff0 100644 --- a/jquery.lightbox.js +++ b/jquery.lightbox.js @@ -1,5 +1,5 @@ /*! - * jquery.lightbox.js v1.1 + * jquery.lightbox.js v1.2 * https://github.com/duncanmcdougall/Responsive-Lightbox * Copyright 2015 Duncan McDougall and other contributors; @license Creative Commons Attribution 2.5 * @@ -39,23 +39,21 @@ if (!plugin.lightbox) { $('body').append( '
' ); plugin.lightbox = $("#"+id); - plugin.caption = $('.lightbox-caption', plugin.lightbox); + plugin.caption = $('.lightbox__caption', plugin.lightbox); } if (plugin.items.length > 1 && opts.nav) { - $('.lightbox-nav', plugin.lightbox).show(); + $('.lightbox__nav', plugin.lightbox).show(); } else { - $('.lightbox-nav', plugin.lightbox).hide(); + $('.lightbox__nav', plugin.lightbox).hide(); } plugin.bindEvents(); @@ -67,12 +65,12 @@ $("body").addClass("blurred"); } $("img", plugin.lightbox).remove(); - plugin.lightbox.fadeIn('fast').append(''); + plugin.lightbox.fadeIn('fast').append(''); var img = $(''); $(img).load(function () { - $('.lightbox-loading').remove(); + $('.lightbox__loading').remove(); plugin.lightbox.append(img); plugin.image = $("img", plugin.lightbox).hide(); plugin.resizeImage(); @@ -179,19 +177,19 @@ }); // Previous click - $(plugin.lightbox).on('click', '.lightbox-previous', function () { + $(plugin.lightbox).on('click', '.lightbox__nav--prev', function () { plugin.previous(); return false; }); // Next click - $(plugin.lightbox).on('click', '.lightbox-next', function () { + $(plugin.lightbox).on('click', '.lightbox__nav--next', function () { plugin.next(); return false; }); // Close click - $(plugin.lightbox).on('click', '.lightbox-close', function () { + $(plugin.lightbox).on('click', '.lightbox__close', function () { plugin.close(); return false; }); diff --git a/jquery.lightbox.min.css b/jquery.lightbox.min.css index 5064df9..c1b2dcd 100644 --- a/jquery.lightbox.min.css +++ b/jquery.lightbox.min.css @@ -1 +1 @@ -.lightbox{cursor:pointer;position:fixed;width:100%;height:100%;top:0;left:0;background:#000;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIElEQVQ4T2NkYGDYDMRkA8ZRAxhGw4BhNAyA+WAYpAMAIFgLQfO9BoEAAAAASUVORK5CYII=);background:rgba(0,0,0,.7);-webkit-filter:none!important;z-index:9997}.lightbox img{display:block;position:absolute;border:5px solid #fff;box-shadow:0 0 20px #000;border-radius:1px}body.blurred>*{-webkit-filter:blur(2px);-webkit-transform:translate3d(0,0,0)}.lightbox-loading{background:url(loading.gif) center center no-repeat;width:31px;height:31px;margin:-16px 0 0 -16px;position:absolute;top:48%;left:50%}.lightbox-caption{display:none;position:absolute;left:0;bottom:0;width:100%;text-align:center;z-index:9998;background:#000;background:rgba(0,0,0,.7)}.lightbox-caption p{margin:0 auto;max-width:70%;display:inline-block;*display:inline;*zoom:1;padding:10px;color:#fff;font-size:12px;line-height:18px}.lightbox-button{position:absolute;z-index:9999;background:no-repeat center center;width:32px;height:32px;opacity:.4;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;transition:all .3s}.lightbox-button:hover,.lightbox-button:focus{opacity:1;-webkit-transform:scale(1.4);-moz-transform:scale(1.4);-ms-transform:scale(1.4);transform:scale(1.4)}.lightbox-close{right:10px;top:10px;background-image:url(close.png)}.lightbox-next{right:10px;top:48%;background-image:url(next.png)}.lightbox-previous{left:10px;top:48%;background-image:url(previous.png)} \ No newline at end of file +.lightbox{cursor:pointer;position:fixed;width:100%;height:100%;top:0;left:0;background:#000;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIElEQVQ4T2NkYGDYDMRkA8ZRAxhGw4BhNAyA+WAYpAMAIFgLQfO9BoEAAAAASUVORK5CYII=);background:rgba(0,0,0,.7);-webkit-filter:none!important;z-index:9997}.lightbox img{display:block;position:absolute;border:5px solid #fff;box-shadow:0 0 20px #000;border-radius:1px}body.blurred>*{-webkit-filter:blur(2px);-webkit-transform:translate3d(0,0,0)}.lightbox__loading{background:url(loading.gif) center center no-repeat;width:32px;height:32px;margin:-16px 0 0 -16px;position:absolute;top:50%;left:50%}.lightbox__caption{display:none;position:absolute;left:0;bottom:0;width:100%;text-align:center;z-index:9998;background:#000;background:rgba(0,0,0,.7)}.lightbox__caption p{margin:0 auto;max-width:70%;display:inline-block;*display:inline;*zoom:1;padding:10px;color:#fff;font-size:12px;line-height:18px}.lightbox__button{position:absolute;z-index:9999;background:no-repeat center center;width:32px;height:32px;opacity:.4;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;transition:all .3s}.lightbox__button:hover,.lightbox__button:focus{opacity:1;-webkit-transform:scale(1.4);-moz-transform:scale(1.4);-ms-transform:scale(1.4);transform:scale(1.4)}.lightbox__close{right:10px;top:10px;background-image:url(close.png)}.lightbox__nav{top:50%;margin-top:-16px}.lightbox__nav--next{right:10px;background-image:url(next.png)}.lightbox__nav--prev{left:10px;background-image:url(previous.png)}} \ No newline at end of file diff --git a/jquery.lightbox.min.js b/jquery.lightbox.min.js index 71465e3..1c0e1b8 100644 --- a/jquery.lightbox.min.js +++ b/jquery.lightbox.min.js @@ -1,5 +1,5 @@ /*! - * jquery.lightbox.js v1.1 + * jquery.lightbox.js v1.2 * https://github.com/duncanmcdougall/Responsive-Lightbox * Copyright 2015 Duncan McDougall and other contributors; @license Creative Commons Attribution 2.5 * @@ -10,4 +10,4 @@ * minSize - int - default 0. Min window width or height to open lightbox. Below threshold will open image in a new tab. * */ -!function(a){"use strict";a.fn.lightbox=function(b){var c={margin:50,nav:!0,blur:!0,minSize:0},d={items:[],lightbox:null,image:null,current:null,locked:!1,caption:null,init:function(b){d.items=b,d.selector="lightbox-"+Math.random().toString().replace(".","");var e="lightbox-"+Math.floor(1e5*Math.random()+1);d.lightbox||(a("body").append(' "),d.lightbox=a("#"+e),d.caption=a(".lightbox-caption",d.lightbox)),d.items.length>1&&c.nav?a(".lightbox-nav",d.lightbox).show():a(".lightbox-nav",d.lightbox).hide(),d.bindEvents()},loadImage:function(){c.blur&&a("body").addClass("blurred"),a("img",d.lightbox).remove(),d.lightbox.fadeIn("fast").append('');var b=a('');a(b).load(function(){a(".lightbox-loading").remove(),d.lightbox.append(b),d.image=a("img",d.lightbox).hide(),d.resizeImage(),d.setCaption()})},setCaption:function(){var b=a(d.current).data("caption");b&&b.length>0?(d.caption.fadeIn(),a("p",d.caption).text(b)):d.caption.hide()},resizeImage:function(){var b,e,f,g,h;e=a(window).height()-c.margin,f=a(window).outerWidth(!0)-c.margin,d.image.width("").height(""),g=d.image.height(),h=d.image.width(),h>f&&(b=f/h,h=f,g=Math.round(g*b)),g>e&&(b=e/g,g=e,h=Math.round(h*b)),d.image.width(h).height(g).css({top:(a(window).height()-d.image.outerHeight())/2+"px",left:(a(window).width()-d.image.outerWidth())/2+"px"}).show(),d.locked=!1},getCurrentIndex:function(){return a.inArray(d.current,d.items)},next:function(){return d.locked?!1:(d.locked=!0,d.getCurrentIndex()>=d.items.length-1?a(d.items[0]).click():a(d.items[d.getCurrentIndex()+1]).click(),void 0)},previous:function(){return d.locked?!1:(d.locked=!0,d.getCurrentIndex()<=0?a(d.items[d.items.length-1]).click():a(d.items[d.getCurrentIndex()-1]).click(),void 0)},bindEvents:function(){a(d.items).click(function(b){if(!d.lightbox.is(":visible")&&(a(window).width()