diff --git a/README.md b/README.md index 16a61a2..021a7d8 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,9 @@ Style with ``#fullsized_fullscreen`` **loop** (optional, defaults to false) - don't hide prev/next button on first/last image, so images are looped +**caption** (optional, defaults to false) - display a caption above the image. Caption dan be set using ``data-caption`` on the fullsizable and will fall back to the ``title`` of the thumbnail. +Styled with ``#fullsized_caption`` + ## Styling The packaged ``fullsizable.css`` stylesheet provides only the bare bones to make fullsizable work. Everything diff --git a/css/jquery-fullsizable.css b/css/jquery-fullsizable.css index 9ebf03f..a4147c1 100644 --- a/css/jquery-fullsizable.css +++ b/css/jquery-fullsizable.css @@ -17,3 +17,7 @@ display: block; margin: 0 auto; } +#fullsized_caption{ + color: #ffffff; + text-align: center; +} diff --git a/examples/simple_with_caption.html b/examples/simple_with_caption.html new file mode 100644 index 0000000..858230c --- /dev/null +++ b/examples/simple_with_caption.html @@ -0,0 +1,80 @@ + + + + + jQuery.fullsizable example/demo + + + + + + + + + + + +

jQuery.fullsizable

+
+ + Steam locomotives of the Chicago & North Western Railway. + + + ”The debris loading isn't particularly extensive, but the color is usual.” + + + Xysticus cristatus, A Estrada, Galicia, Spain + + + Xysticus cristatus, A Estrada, Galicia, Spain + +
+ + diff --git a/js/jquery-fullsizable.coffee b/js/jquery-fullsizable.coffee index 3a00d40..b3ccbf8 100644 --- a/js/jquery-fullsizable.coffee +++ b/js/jquery-fullsizable.coffee @@ -17,6 +17,7 @@ Options: **preload** (optional, defaults to true) - lookup selector on initialization, set only to false in combination with ``reloadOnOpen: true`` or ``fullsizable:reload`` event. **reloadOnOpen** (optional, defaults to false) - lookup selector every time the viewer opens. **loop** (optional, defaults to false) - don't hide prev/next button on first/last image, so images are looped + **caption** (optional, defaults to false) - display a caption above the image. Caption dan be set using ``data-caption`` on the fullsizable and will fall back to the ``title`` of the thumbnail. ### $ = jQuery @@ -25,6 +26,7 @@ container_id = '#jquery-fullsizable' image_holder_id = '#fullsized_image_holder' spinner_class = 'fullsized_spinner' $image_holder = $('
') +$caption_holder = $('
') images = [] current_image = 0 @@ -69,6 +71,7 @@ showImage = (image, direction = 1, shouldHideChrome = false) -> current_image = image.index $(image_holder_id).hide() $(image_holder_id).html(image) + $caption_holder.text(image.caption) if image.caption && options.caption # show/hide navigation when hitting range limits if options.navigation @@ -136,12 +139,14 @@ makeFullsizable = -> $(options.selector).each -> image = new Image - image.buffer_src = $(this).attr('href') + $this = $(this) + image.buffer_src = $this.attr('href') image.index = images.length + image.caption = $this.data('caption') || $this.children('img:first').attr('title') if options.caption images.push image if options.openOnClick - $(this).click (e) -> + $this.click (e) -> e.preventDefault() makeFullsizable() if options.reloadOnOpen openViewer(image, this) @@ -172,6 +177,9 @@ prepareCurtain = -> e.stopPropagation() toggleFullscreen() + if options.caption + $image_holder.prepend($caption_holder ) + switch options.clickBehaviour when 'close' then $(document).on 'click', container_id, closeViewer when 'next' then $(document).on 'click', container_id, -> nextImage(true) @@ -225,6 +233,7 @@ $.fn.fullsizable = (opts) -> preload: true reloadOnOpen: false loop: false + caption : false , opts || {} prepareCurtain() diff --git a/js/jquery-fullsizable.js b/js/jquery-fullsizable.js index f45f5dc..b0510f0 100644 --- a/js/jquery-fullsizable.js +++ b/js/jquery-fullsizable.js @@ -1,4 +1,4 @@ -// Generated by CoffeeScript 1.8.0 +// Generated by CoffeeScript 1.10.0 /* jQuery fullsizable plugin v2.1.0 @@ -19,10 +19,11 @@ Options: **preload** (optional, defaults to true) - lookup selector on initialization, set only to false in combination with ``reloadOnOpen: true`` or ``fullsizable:reload`` event. **reloadOnOpen** (optional, defaults to false) - lookup selector every time the viewer opens. **loop** (optional, defaults to false) - don't hide prev/next button on first/last image, so images are looped + **caption** (optional, defaults to false) - display a caption above the image. Caption dan be set using ``data-caption`` on the fullsizable and will fall back to the ``title`` of the thumbnail. */ (function() { - var $, $image_holder, bindCurtainEvents, closeFullscreen, closeViewer, container_id, current_image, hasFullscreenSupport, hideChrome, image_holder_id, images, keyPressed, makeFullsizable, mouseMovement, mouseStart, nextImage, openViewer, options, preloadImage, prepareCurtain, prevImage, resizeImage, showChrome, showImage, spinner_class, stored_scroll_position, toggleFullscreen, unbindCurtainEvents; + var $, $caption_holder, $image_holder, bindCurtainEvents, closeFullscreen, closeViewer, container_id, current_image, hasFullscreenSupport, hideChrome, image_holder_id, images, keyPressed, makeFullsizable, mouseMovement, mouseStart, nextImage, openViewer, options, preloadImage, prepareCurtain, prevImage, resizeImage, showChrome, showImage, spinner_class, stored_scroll_position, toggleFullscreen, unbindCurtainEvents; $ = jQuery; @@ -34,6 +35,8 @@ Options: $image_holder = $('
'); + $caption_holder = $('
'); + images = []; current_image = 0; @@ -103,6 +106,9 @@ Options: current_image = image.index; $(image_holder_id).hide(); $(image_holder_id).html(image); + if (image.caption && options.caption) { + $caption_holder.text(image.caption); + } if (options.navigation) { if (shouldHideChrome === true) { hideChrome(); @@ -178,13 +184,17 @@ Options: makeFullsizable = function() { images.length = 0; return $(options.selector).each(function() { - var image; + var $this, image; image = new Image; - image.buffer_src = $(this).attr('href'); + $this = $(this); + image.buffer_src = $this.attr('href'); image.index = images.length; + if (options.caption) { + image.caption = $this.data('caption') || $this.children('img:first').attr('title'); + } images.push(image); if (options.openOnClick) { - return $(this).click(function(e) { + return $this.click(function(e) { e.preventDefault(); if (options.reloadOnOpen) { makeFullsizable(); @@ -225,6 +235,9 @@ Options: return toggleFullscreen(); }); } + if (options.caption) { + $image_holder.prepend($caption_holder); + } switch (options.clickBehaviour) { case 'close': return $(document).on('click', container_id, closeViewer); @@ -301,7 +314,8 @@ Options: clickBehaviour: 'close', preload: true, reloadOnOpen: false, - loop: false + loop: false, + caption: false }, opts || {}); prepareCurtain(); if (options.preload) { @@ -309,20 +323,20 @@ Options: } $(document).bind('fullsizable:reload', makeFullsizable); $(document).bind('fullsizable:open', function(e, target) { - var image, _i, _len, _results; + var i, image, len, results; if (options.reloadOnOpen) { makeFullsizable(); } - _results = []; - for (_i = 0, _len = images.length; _i < _len; _i++) { - image = images[_i]; + results = []; + for (i = 0, len = images.length; i < len; i++) { + image = images[i]; if (image.buffer_src === $(target).attr('href')) { - _results.push(openViewer(image, target)); + results.push(openViewer(image, target)); } else { - _results.push(void 0); + results.push(void 0); } } - return _results; + return results; }); return this; }; diff --git a/js/jquery-fullsizable.min.js b/js/jquery-fullsizable.min.js index a56ce4b..48530e1 100644 --- a/js/jquery-fullsizable.min.js +++ b/js/jquery-fullsizable.min.js @@ -1,5 +1,6 @@ + /* -jQuery fullsizable plugin v2.1.0 -(c) 2011-2015 Matthias Schmidt -*/ -(function(){var e,n,l,t,u,o,i,r,c,d,s,a,f,h,p,g,v,m,w,b,z,_,k,F,S,x,q,y;e=jQuery,o="#jquery-fullsizable",d="#fullsized_image_holder",S="fullsized_spinner",n=e('
'),s=[],i=0,m=null,x=null,_=function(){var n;return n=s[i],null==n.ratio&&(n.ratio=(n.naturalHeight/n.naturalWidth).toFixed(2)),e(window).height()/n.ratio>e(window).width()?(e(n).width(e(window).width()),e(n).height(e(window).width()*n.ratio),e(n).css("margin-top",(e(window).height()-e(n).height())/2)):(e(n).height(e(window).height()),e(n).width(e(window).height()/n.ratio),e(n).css("margin-top",0))},a=function(e){return 27===e.keyCode&&u(),37===e.keyCode&&z(!0),39===e.keyCode?g(!0):void 0},z=function(e){return null==e&&(e=!1),i>0?F(s[i-1],-1,e):m.loop?F(s[s.length-1],-1,e):void 0},g=function(e){return null==e&&(e=!1),i0))return;n=s[i-1]}return n.onload=function(){return this.loaded=!0},""===n.src?n.src=n.buffer_src:void 0},v=function(t,u){return e("body").append(n),e(window).bind("resize",_),F(t),e(o).hide().fadeIn(function(){return null!=m.detach_id&&(x=e(window).scrollTop(),e("#"+m.detach_id).css("display","none"),_()),l(),e(document).trigger("fullsizable:opened",u)})},u=function(){return null!=m.detach_id&&(e("#"+m.detach_id).css("display","block"),e(window).scrollTop(x)),e(o).fadeOut(function(){return n.remove()}),t(),e(o).removeClass(S),y(),e(window).unbind("resize",_)},f=function(){return s.length=0,e(m.selector).each(function(){var n;return n=new Image,n.buffer_src=e(this).attr("href"),n.index=s.length,s.push(n),m.openOnClick?e(this).click(function(e){return e.preventDefault(),m.reloadOnOpen&&f(),v(n,this)}):void 0})},b=function(){switch(m.navigation&&(n.append(''),e(document).on("click","#fullsized_go_prev",function(e){return e.preventDefault(),e.stopPropagation(),z()}),e(document).on("click","#fullsized_go_next",function(e){return e.preventDefault(),e.stopPropagation(),g()})),m.closeButton&&(n.append(''),e(document).on("click","#fullsized_close",function(e){return e.preventDefault(),e.stopPropagation(),u()})),m.fullscreenButton&&r()&&(n.append(''),e(document).on("click","#fullsized_fullscreen",function(e){return e.preventDefault(),e.stopPropagation(),q()})),m.clickBehaviour){case"close":return e(document).on("click",o,u);case"next":return e(document).on("click",o,function(){return g(!0)});default:return e(document).on("click",o,m.clickBehaviour)}},l=function(){return e(document).bind("keydown",a),e(document).bind("fullsizable:next",function(){return g(!0)}),e(document).bind("fullsizable:prev",function(){return z(!0)}),e(document).bind("fullsizable:close",u)},y=function(){return e(document).unbind("keydown",a),e(document).unbind("fullsizable:next"),e(document).unbind("fullsizable:prev"),e(document).unbind("fullsizable:close")},c=function(){var e;return e=n.find("a"),e.is(":visible")===!0?(e.toggle(!1),n.bind("mousemove",h)):void 0},p=null,h=function(e){var l;return null===p&&(p=[e.clientX,e.clientY]),l=Math.round(Math.sqrt(Math.pow(p[1]-e.clientY,2)+Math.pow(p[0]-e.clientX,2))),l>=10?(n.unbind("mousemove",h),p=null,k()):void 0},k=function(){return e("#fullsized_close, #fullsized_fullscreen").toggle(!0),m.loop?(e("#fullsized_go_prev").show(),e("#fullsized_go_next").show()):(e("#fullsized_go_prev").toggle(0!==i),e("#fullsized_go_next").toggle(i!==s.length-1))},e.fn.fullsizable=function(n){return m=e.extend({selector:this.selector,detach_id:null,navigation:!0,closeButton:!0,fullscreenButton:!0,openOnClick:!0,clickBehaviour:"close",preload:!0,reloadOnOpen:!1,loop:!1},n||{}),b(),m.preload&&f(),e(document).bind("fullsizable:reload",f),e(document).bind("fullsizable:open",function(n,l){var t,u,o,i;for(m.reloadOnOpen&&f(),i=[],u=0,o=s.length;o>u;u++)t=s[u],i.push(t.buffer_src===e(l).attr("href")?v(t,l):void 0);return i}),this},r=function(){var e;return e=n.get(0),e.requestFullScreen||e.webkitRequestFullScreen||e.mozRequestFullScreen?!0:!1},t=function(){return q(!0)},q=function(e){var l;return l=n.get(0),l.requestFullScreen?document.fullScreen||e?document.exitFullScreen():l.requestFullScreen():l.webkitRequestFullScreen?document.webkitIsFullScreen||e?document.webkitCancelFullScreen():l.webkitRequestFullScreen():l.mozRequestFullScreen?document.mozFullScreen||e?document.mozCancelFullScreen():l.mozRequestFullScreen():void 0}}).call(this); + jQuery fullsizable plugin v2.1.0 + (c) 2011-2015 Matthias Schmidt + */ +(function(){var e,k,i,y,q,f,o,l,x,S,h,t,w,d,v,c,s,m,n,b,F,p,r,z,u,a,g,_,C;e=jQuery,o="#jquery-fullsizable",h="#fullsized_image_holder",a="fullsized_spinner",i=e('
'),k=e('
'),t=[],l=0,n=null,g=null,r=function(){var n;return n=t[l],null==n.ratio&&(n.ratio=(n.naturalHeight/n.naturalWidth).toFixed(2)),e(window).height()/n.ratio>e(window).width()?(e(n).width(e(window).width()),e(n).height(e(window).width()*n.ratio),e(n).css("margin-top",(e(window).height()-e(n).height())/2)):(e(n).height(e(window).height()),e(n).width(e(window).height()/n.ratio),e(n).css("margin-top",0))},w=function(e){return 27===e.keyCode&&f(),37===e.keyCode&&p(!0),39===e.keyCode?s(!0):void 0},p=function(e){return null==e&&(e=!1),l>0?u(t[l-1],-1,e):n.loop?u(t[t.length-1],-1,e):void 0},s=function(e){return null==e&&(e=!1),l0))return;e=t[l-1]}return e.onload=function(){return this.loaded=!0},""===e.src?e.src=e.buffer_src:void 0},m=function(t,l){return e("body").append(i),e(window).bind("resize",r),u(t),e(o).hide().fadeIn(function(){return null!=n.detach_id&&(g=e(window).scrollTop(),e("#"+n.detach_id).css("display","none"),r()),y(),e(document).trigger("fullsizable:opened",l)})},f=function(){return null!=n.detach_id&&(e("#"+n.detach_id).css("display","block"),e(window).scrollTop(g)),e(o).fadeOut(function(){return i.remove()}),q(),e(o).removeClass(a),C(),e(window).unbind("resize",r)},d=function(){return t.length=0,e(n.selector).each(function(){var i,l;return l=new Image,i=e(this),l.buffer_src=i.attr("href"),l.index=t.length,n.caption&&(l.caption=i.data("caption")||i.children("img:first").attr("title")),t.push(l),n.openOnClick?i.click(function(e){return e.preventDefault(),n.reloadOnOpen&&d(),m(l,this)}):void 0})},F=function(){switch(n.navigation&&(i.append(''),e(document).on("click","#fullsized_go_prev",function(e){return e.preventDefault(),e.stopPropagation(),p()}),e(document).on("click","#fullsized_go_next",function(e){return e.preventDefault(),e.stopPropagation(),s()})),n.closeButton&&(i.append(''),e(document).on("click","#fullsized_close",function(e){return e.preventDefault(),e.stopPropagation(),f()})),n.fullscreenButton&&x()&&(i.append(''),e(document).on("click","#fullsized_fullscreen",function(e){return e.preventDefault(),e.stopPropagation(),_()})),n.caption&&i.prepend(k),n.clickBehaviour){case"close":return e(document).on("click",o,f);case"next":return e(document).on("click",o,function(){return s(!0)});default:return e(document).on("click",o,n.clickBehaviour)}},y=function(){return e(document).bind("keydown",w),e(document).bind("fullsizable:next",function(){return s(!0)}),e(document).bind("fullsizable:prev",function(){return p(!0)}),e(document).bind("fullsizable:close",f)},C=function(){return e(document).unbind("keydown",w),e(document).unbind("fullsizable:next"),e(document).unbind("fullsizable:prev"),e(document).unbind("fullsizable:close")},S=function(){var e;return e=i.find("a"),e.is(":visible")===!0?(e.toggle(!1),i.bind("mousemove",v)):void 0},c=null,v=function(e){var n;return null===c&&(c=[e.clientX,e.clientY]),n=Math.round(Math.sqrt(Math.pow(c[1]-e.clientY,2)+Math.pow(c[0]-e.clientX,2))),n>=10?(i.unbind("mousemove",v),c=null,z()):void 0},z=function(){return e("#fullsized_close, #fullsized_fullscreen").toggle(!0),n.loop?(e("#fullsized_go_prev").show(),e("#fullsized_go_next").show()):(e("#fullsized_go_prev").toggle(0!==l),e("#fullsized_go_next").toggle(l!==t.length-1))},e.fn.fullsizable=function(l){return n=e.extend({selector:this.selector,detach_id:null,navigation:!0,closeButton:!0,fullscreenButton:!0,openOnClick:!0,clickBehaviour:"close",preload:!0,reloadOnOpen:!1,loop:!1,caption:!1},l||{}),F(),n.preload&&d(),e(document).bind("fullsizable:reload",d),e(document).bind("fullsizable:open",function(c,u){var l,o,r,i;for(n.reloadOnOpen&&d(),i=[],l=0,r=t.length;r>l;l++)o=t[l],o.buffer_src===e(u).attr("href")?i.push(m(o,u)):i.push(void 0);return i}),this},x=function(){var e;return e=i.get(0),e.requestFullScreen||e.webkitRequestFullScreen||e.mozRequestFullScreen?!0:!1},q=function(){return _(!0)},_=function(n){var e;return e=i.get(0),e.requestFullScreen?document.fullScreen||n?document.exitFullScreen():e.requestFullScreen():e.webkitRequestFullScreen?document.webkitIsFullScreen||n?document.webkitCancelFullScreen():e.webkitRequestFullScreen():e.mozRequestFullScreen?document.mozFullScreen||n?document.mozCancelFullScreen():e.mozRequestFullScreen():void 0}}).call(this); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..79c2510 --- /dev/null +++ b/package.json @@ -0,0 +1,36 @@ +{ + "name": "jquery-fullsizable", + "version": "2.1.0", + "homepage": "http://mschmidt.github.io/jquery-fullsizable/", + "authors": [ + "Matthias Schmidt (http://pixelflush.com)" + ], + "repository": { + "type": "git", + "url": "git://github.com/MSchmidt/jquery-fullsizable.git" + }, + "description": "jQuery plugin to make use of the full available browser space for enjoyable image viewing. Also supports the native HTML5 fullscreen API in modern browsers.", + "main": [ + "js/jquery-fullsizable.js", + "css/jquery-fullsizable.css" + ], + "dependencies": { + "jquery": ">=1.7" + }, + "keywords": [ + "jquery", + "fullsizable", + "lightbox", + "image", + "photo", + "gallery", + "fullscreen", + "responsive" + ], + "license": "MIT", + "ignore": [ + "**/.*", + "js/jquery-1.7.2.js", + "examples" + ] +}