From d38588c34d4f54cdb30ae654f2a6e7191eca8ae3 Mon Sep 17 00:00:00 2001 From: root Date: Sun, 13 Sep 2015 17:36:39 +0200 Subject: [PATCH] Caption Attribute can now be any attribute. Bugfixes --- README.md | 7 ++++++- dist/simple-lightbox.js | 5 +++-- dist/simple-lightbox.min.js | 2 +- package.json | 30 ++++++++++++++++++++++++++++++ 4 files changed, 40 insertions(+), 4 deletions(-) create mode 100644 package.json diff --git a/README.md b/README.md index 5581544..7ed0c96 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,11 @@ Touch-friendly image lightbox for mobile and desktop with jQuery ### Install ```sh +//Bower bower install simplelightbox + +//NPM +npm install simplelightbox ``` ### Usage @@ -20,7 +24,7 @@ var lightbox = $('.gallery a').simpleLightbox(options); | nav | true | bool | show arrow-navigation or not | | navText | ['←','→'] | array | text or html for the navigation arrows | | captions | true | bool | show captions if availabled or not | -| captionsData | title | string | get the caption from title or data-title attribute | +| captionsData | title | string | get the caption from given attribute or data-title | | close | true | bool | show the close button or not | | closeText | 'X' | string | text or html for the close button | | showCounter | true | bool | show current image index or not | @@ -66,6 +70,7 @@ var gallery = $('.gallery a').simpleLightbox(); gallery.next(); // Next Image ``` ### Changelog +**1.4.0 - Caption Attribute can now be what, you want, or data-title. Fixed some small issues** **1.3.1 - Bugfix: disable keyboard control if lightbox is closed** **1.3.0 - Added current index indicator/counter** **1.2.0 - Added option for captions attribute (title or data-title)** diff --git a/dist/simple-lightbox.js b/dist/simple-lightbox.js index 75f46fc..e1737e7 100644 --- a/dist/simple-lightbox.js +++ b/dist/simple-lightbox.js @@ -17,6 +17,7 @@ $.fn.simpleLightbox = function( options ) nav: true, navText: ['←','→'], captions: true, + captionsData: 'title', close: true, closeText: 'X', showCounter: true, @@ -149,7 +150,7 @@ $.fn.simpleLightbox = function( options ) .fadeIn('fast'); opened = true; - var captionText = $(selector).eq(index).find('img').prop('title'); + var captionText = (options.captionsData == 'data-title') ? $(selector).eq(index).find('img').data('title') : $(selector).eq(index).find('img').prop(options.captionsData); if(dir == 1 || dir == -1){ var css = { 'opacity': 1.0 }; if( canTransisions ) { @@ -172,7 +173,7 @@ $.fn.simpleLightbox = function( options ) }, setCaption = function(captiontext){ if(captiontext != '' && options.captions){ - caption.text(captiontext).hide().appendTo($('.sl-image')).fadeIn('fast'); + caption.html(captiontext).hide().appendTo($('.sl-image')).fadeIn('fast'); } }, slide = function(speed, pos){ diff --git a/dist/simple-lightbox.min.js b/dist/simple-lightbox.min.js index 656ad43..46554ed 100644 --- a/dist/simple-lightbox.min.js +++ b/dist/simple-lightbox.min.js @@ -2,4 +2,4 @@ By Andre Knieriem, www.andreknieriem.de Available for use under the MIT License */ -!function(e,t,n){"use strict";e.fn.simpleLightbox=function(a){var a=e.extend({overlay:!0,spinner:!0,nav:!0,navText:["←","→"],captions:!0,close:!0,closeText:"X",showCounter:!0,fileExt:"png|jpg|jpeg|gif",animationSpeed:250,preloading:!0,enableKeyboard:!0,loop:!0,docClose:!0,swipeTolerance:50,className:"simple-lightbox",widthRatio:.8,heightRatio:.9},a),i=(t.navigator.pointerEnabled||t.navigator.msPointerEnabled,0),o=e(),s=function(){var e=n.body||n.documentElement,e=e.style;return""==e.WebkitTransition?"-webkit-":""==e.MozTransition?"-moz-":""==e.OTransition?"-o-":""==e.transition?"":!1},l=!1,r=this.selector,s=s(),p=s!==!1?!0:!1,c="simplelb",d=e("
").addClass("sl-overlay"),u=e(""),h=e("
").addClass("sl-counter").html('/'),m=!1,v=0,x=e(),w=e("
").addClass("sl-caption"),b=function(t){return"a"==e(t).prop("tagName").toLowerCase()&&new RegExp(".("+a.fileExt+")$","i").test(e(t).attr("href"))},T=function(){a.overlay&&d.appendTo(e("body")),e("
").addClass("sl-wrapper").addClass(a.className).html('
').appendTo("body"),x=e(".sl-image"),a.close&&u.appendTo(e(".sl-wrapper")),a.showCounter&&e(r).length>1&&(h.appendTo(e(".sl-wrapper")),e(".sl-wrapper .sl-counter .sl-total").text(e(r).length)),a.nav&&f.appendTo(e(".sl-wrapper")),a.spinner&&g.appendTo(e(".sl-wrapper"))},y=function(t){t.trigger(e.Event("show.simplelightbox")),m=!0,v=e(r).index(t),o=e("").hide().attr("src",t.attr("href")),e(".sl-image").html(""),o.appendTo(e(".sl-image")),d.fadeIn("fast"),e(".sl-close").fadeIn("fast"),g.show(),f.fadeIn("fast"),e(".sl-wrapper .sl-counter .sl-current").text(v+1),h.fadeIn("fast"),C(),a.preloading&&S(),setTimeout(function(){t.trigger(e.Event("shown.simplelightbox"))},a.animationSpeed)},C=function(n){if(o.length){var i=new Image,s=e(t).width()*a.widthRatio,c=e(t).height()*a.heightRatio;i.src=o.attr("src"),i.onload=function(){var d=i.width,u=i.height;if(d>s||u>c){var f=d/u>s/c?d/s:u/c;d/=f,u/=f}e(".sl-image").css({top:(e(t).height()-u)/2+"px",left:(e(t).width()-d)/2+"px"}),g.hide(),o.css({width:d+"px",height:u+"px"}).fadeIn("fast"),l=!0;var h=e(r).eq(v).find("img").prop("title");if(1==n||-1==n){var x={opacity:1};p?(k(0,100*n+"px"),setTimeout(function(){k(a.animationSpeed/1e3,"0px"),50})):x.left=parseInt(e(".sl-image").css("left"))+100*n+"px",e(".sl-image").animate(x,a.animationSpeed,function(){m=!1,E(h)})}else m=!1,E(h)}}},E=function(t){""!=t&&a.captions&&w.text(t).hide().appendTo(e(".sl-image")).fadeIn("fast")},k=function(t,n){var a={};a[s+"transform"]="translateX("+n+")",a[s+"transition"]=s+"transform "+t+"s linear",e(".sl-image").css(a)},S=function(){var t=0>v+1?e(r).length-1:v+1>=e(r).length-1?0:v+1,n=0>v-1?e(r).length-1:v-1>=e(r).length-1?0:v-1;e("").attr("src",e(r).eq(t).attr("href")).load(),e("").attr("src",e(r).eq(n).attr("href")).load()},I=function(t){g.show();var n=v+t;if(!(m||(0>n||n>=e(r).length)&&0==a.loop)){m=!0,v=0>n?e(r).length-1:n>e(r).length-1?0:n,e(".sl-wrapper .sl-counter .sl-current").text(v+1);var s={opacity:0};p?k(a.animationSpeed/1e3,-100*t-i+"px"):s.left=parseInt(e(".sl-image").css("left"))+-100*t+"px",e(".sl-image").animate(s,a.animationSpeed,function(){setTimeout(function(){var n=e(r).eq(v);o.attr("src",n.attr("href")),e(".sl-caption").remove(),C(t),a.preloading&&S()},100)})}},M=function(){var t=e(r).eq(v),n=!1;t.trigger(e.Event("close.simplelightbox")),e(".sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter").fadeOut("fast",function(){n||t.trigger(e.Event("closed.simplelightbox")),n=!0}),o=e(),l=!1};T(),e(t).on("resize",C),e(n).on("click."+c,this.selector,function(t){if(b(this)){if(t.preventDefault(),m)return!1;y(e(this))}}),e(n).on("click",".sl-close",function(e){e.preventDefault(),l&&M()}),e(n).click(function(t){l&&a.docClose&&0==e(t.target).closest(".sl-image").length&&0==e(t.target).closest(".sl-navigation").length&&M()}),e(n).on("click",".sl-navigation button",function(t){t.preventDefault(),i=0,I(e(this).hasClass("sl-next")?1:-1)}),a.enableKeyboard&&e(n).on("keyup."+c,function(e){if(e.preventDefault(),i=0,l){var t=e.keyCode;27==t&&M(),(37==t||39==e.keyCode)&&I(39==e.keyCode?1:-1)}});var D=0,X=0,q=!1,P=0;return e(n).on("touchstart mousedown pointerdown MSPointerDown",".sl-image",function(e){return q?!0:(p&&(P=parseInt(x.css("left"))),q=!0,void(D=e.originalEvent.pageX||e.originalEvent.touches[0].pageX))}).on("touchmove mousemove pointermove MSPointerMove",".sl-image",function(e){return q?(e.preventDefault(),X=e.originalEvent.pageX||e.originalEvent.touches[0].pageX,i=D-X,void(p?k(0,-i+"px"):x.css("left",P-i+"px"))):!0}).on("touchend mouseup touchcancel pointerup pointercancel MSPointerUp MSPointerCancel",".sl-image",function(){q=!1,Math.abs(i)>a.swipeTolerance?I(i>0?1:-1):p?k(a.animationSpeed/1e3,"0px"):x.animate({left:P+"px"},a.animationSpeed/2)}),this.open=function(e){y(e)},this.next=function(){I(1)},this.prev=function(){I(-1)},this.close=function(){M()},this.destroy=function(){e(n).unbind("click."+c).unbind("keyup."+c),M(),e(".sl-overlay, .sl-wrapper").remove()},this}}(jQuery,window,document); \ No newline at end of file +!function(e,t,n){"use strict";e.fn.simpleLightbox=function(a){var a=e.extend({overlay:!0,spinner:!0,nav:!0,navText:["←","→"],captions:!0,captionsData:"title",close:!0,closeText:"X",showCounter:!0,fileExt:"png|jpg|jpeg|gif",animationSpeed:250,preloading:!0,enableKeyboard:!0,loop:!0,docClose:!0,swipeTolerance:50,className:"simple-lightbox",widthRatio:.8,heightRatio:.9},a),i=(t.navigator.pointerEnabled||t.navigator.msPointerEnabled,0),o=e(),s=function(){var e=n.body||n.documentElement,e=e.style;return""==e.WebkitTransition?"-webkit-":""==e.MozTransition?"-moz-":""==e.OTransition?"-o-":""==e.transition?"":!1},l=!1,r=this.selector,s=s(),p=s!==!1?!0:!1,c="simplelb",d=e("
").addClass("sl-overlay"),u=e(""),h=e("
").addClass("sl-counter").html('/'),m=!1,v=0,x=e(),w=e("
").addClass("sl-caption"),b=function(t){return"a"==e(t).prop("tagName").toLowerCase()&&new RegExp(".("+a.fileExt+")$","i").test(e(t).attr("href"))},T=function(){a.overlay&&d.appendTo(e("body")),e("
").addClass("sl-wrapper").addClass(a.className).html('
').appendTo("body"),x=e(".sl-image"),a.close&&u.appendTo(e(".sl-wrapper")),a.showCounter&&e(r).length>1&&(h.appendTo(e(".sl-wrapper")),e(".sl-wrapper .sl-counter .sl-total").text(e(r).length)),a.nav&&f.appendTo(e(".sl-wrapper")),a.spinner&&g.appendTo(e(".sl-wrapper"))},y=function(t){t.trigger(e.Event("show.simplelightbox")),m=!0,v=e(r).index(t),o=e("").hide().attr("src",t.attr("href")),e(".sl-image").html(""),o.appendTo(e(".sl-image")),d.fadeIn("fast"),e(".sl-close").fadeIn("fast"),g.show(),f.fadeIn("fast"),e(".sl-wrapper .sl-counter .sl-current").text(v+1),h.fadeIn("fast"),C(),a.preloading&&S(),setTimeout(function(){t.trigger(e.Event("shown.simplelightbox"))},a.animationSpeed)},C=function(n){if(o.length){var i=new Image,s=e(t).width()*a.widthRatio,c=e(t).height()*a.heightRatio;i.src=o.attr("src"),i.onload=function(){var d=i.width,u=i.height;if(d>s||u>c){var f=d/u>s/c?d/s:u/c;d/=f,u/=f}e(".sl-image").css({top:(e(t).height()-u)/2+"px",left:(e(t).width()-d)/2+"px"}),g.hide(),o.css({width:d+"px",height:u+"px"}).fadeIn("fast"),l=!0;var h="data-title"==a.captionsData?e(r).eq(v).find("img").data("title"):e(r).eq(v).find("img").prop(a.captionsData);if(1==n||-1==n){var x={opacity:1};p?(k(0,100*n+"px"),setTimeout(function(){k(a.animationSpeed/1e3,"0px"),50})):x.left=parseInt(e(".sl-image").css("left"))+100*n+"px",e(".sl-image").animate(x,a.animationSpeed,function(){m=!1,E(h)})}else m=!1,E(h)}}},E=function(t){""!=t&&a.captions&&w.html(t).hide().appendTo(e(".sl-image")).fadeIn("fast")},k=function(t,n){var a={};a[s+"transform"]="translateX("+n+")",a[s+"transition"]=s+"transform "+t+"s linear",e(".sl-image").css(a)},S=function(){var t=0>v+1?e(r).length-1:v+1>=e(r).length-1?0:v+1,n=0>v-1?e(r).length-1:v-1>=e(r).length-1?0:v-1;e("").attr("src",e(r).eq(t).attr("href")).load(),e("").attr("src",e(r).eq(n).attr("href")).load()},I=function(t){g.show();var n=v+t;if(!(m||(0>n||n>=e(r).length)&&0==a.loop)){m=!0,v=0>n?e(r).length-1:n>e(r).length-1?0:n,e(".sl-wrapper .sl-counter .sl-current").text(v+1);var s={opacity:0};p?k(a.animationSpeed/1e3,-100*t-i+"px"):s.left=parseInt(e(".sl-image").css("left"))+-100*t+"px",e(".sl-image").animate(s,a.animationSpeed,function(){setTimeout(function(){var n=e(r).eq(v);o.attr("src",n.attr("href")),e(".sl-caption").remove(),C(t),a.preloading&&S()},100)})}},D=function(){var t=e(r).eq(v),n=!1;t.trigger(e.Event("close.simplelightbox")),e(".sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter").fadeOut("fast",function(){n||t.trigger(e.Event("closed.simplelightbox")),n=!0}),o=e(),l=!1};T(),e(t).on("resize",C),e(n).on("click."+c,this.selector,function(t){if(b(this)){if(t.preventDefault(),m)return!1;y(e(this))}}),e(n).on("click",".sl-close",function(e){e.preventDefault(),l&&D()}),e(n).click(function(t){l&&a.docClose&&0==e(t.target).closest(".sl-image").length&&0==e(t.target).closest(".sl-navigation").length&&D()}),e(n).on("click",".sl-navigation button",function(t){t.preventDefault(),i=0,I(e(this).hasClass("sl-next")?1:-1)}),a.enableKeyboard&&e(n).on("keyup."+c,function(e){if(e.preventDefault(),i=0,l){var t=e.keyCode;27==t&&D(),(37==t||39==e.keyCode)&&I(39==e.keyCode?1:-1)}});var M=0,q=0,X=!1,P=0;return e(n).on("touchstart mousedown pointerdown MSPointerDown",".sl-image",function(e){return X?!0:(p&&(P=parseInt(x.css("left"))),X=!0,void(M=e.originalEvent.pageX||e.originalEvent.touches[0].pageX))}).on("touchmove mousemove pointermove MSPointerMove",".sl-image",function(e){return X?(e.preventDefault(),q=e.originalEvent.pageX||e.originalEvent.touches[0].pageX,i=M-q,void(p?k(0,-i+"px"):x.css("left",P-i+"px"))):!0}).on("touchend mouseup touchcancel pointerup pointercancel MSPointerUp MSPointerCancel",".sl-image",function(){X=!1,Math.abs(i)>a.swipeTolerance?I(i>0?1:-1):p?k(a.animationSpeed/1e3,"0px"):x.animate({left:P+"px"},a.animationSpeed/2)}),this.open=function(e){y(e)},this.next=function(){I(1)},this.prev=function(){I(-1)},this.close=function(){D()},this.destroy=function(){e(n).unbind("click."+c).unbind("keyup."+c),D(),e(".sl-overlay, .sl-wrapper").remove()},this}}(jQuery,window,document); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..38f623e --- /dev/null +++ b/package.json @@ -0,0 +1,30 @@ +{ + "name": "simplelightbox", + "version": "1.4.0", + "description": "Touch-friendly image lightbox for mobile and desktop with jQuery", + "main": "dist/simple-lightbox.js", + "repository": { + "type": "git", + "url": "https://github.com/andreknieriem/simplelightbox.git" + }, + "keywords": [ + "lightbox", + "modal", + "gallery", + "jquery-plugin", + "touchfriendly", + "responsive", + "popup", + "dialog" + ], + "author": { + "name": "Andre Rinas", + "url": "http://www.andreknieriem.de", + "email": "info@andreknieriem.de" + }, + "license": "MIT", + "bugs": { + "url": "https://github.com/andreknieriem/simplelightbox/issues" + }, + "homepage": "http://andreknieriem.de/simple-lightbox" +}