diff --git a/dist/index.html b/dist/index.html index ec0c4b3..875cdda 100644 --- a/dist/index.html +++ b/dist/index.html @@ -27,24 +27,24 @@ @@ -146,7 +146,7 @@

{src : 'demo-images/6.jpg', title : 'caption 2'}, {src : 'demo-images/8.jpg', title : 'caption 3'}, ], - fullWindow : 'contain', + imageSize : 'contain', container : '#container3' }).data('chocolat'); @@ -195,7 +195,7 @@

e.preventDefault() console.log('cover mode start') - instance.api().set('fullWindow', 'cover') + instance.api().set('imageSize', 'cover') var def = instance.api().place() def.done(function(){ @@ -207,7 +207,7 @@

e.preventDefault() console.log('contain mode start') - instance.api().set('fullWindow', 'contain') + instance.api().set('imageSize', 'contain') var def = instance.api().place() def.done(function(){ diff --git a/dist/js/jquery.chocolat.js b/dist/js/jquery.chocolat.js index 38b34e5..e6de5b2 100644 --- a/dist/js/jquery.chocolat.js +++ b/dist/js/jquery.chocolat.js @@ -4,7 +4,7 @@ container : window, // window or jquery object or jquery selector, or element imageSelector : '.chocolat-image', className : '', - fullWindow : false, // false, 'contain', 'cover' or 'native' + imageSize : 'default', // 'default', 'contain', 'cover' or 'native' initialZoomState : null, fullScreen : false, loop : false, @@ -172,7 +172,7 @@ var holderRatio = (holderHeight / holderWidth); var imgRatio = (imgHeight / imgWidth); - if(this.settings.fullWindow == 'cover') { + if(this.settings.imageSize == 'cover') { if(imgRatio < holderRatio) { height = holderHeight; width = height / imgRatio; @@ -182,7 +182,7 @@ height = width * imgRatio; } } - else if(this.settings.fullWindow == 'native') { + else if(this.settings.imageSize == 'native') { height = imgHeight; width = imgWidth; } @@ -195,9 +195,9 @@ width = holderGlobalWidth; height = width * imgRatio; } - if(!this.settings.fullWindow && (width >= imgWidth || height >= imgHeight)) { - width=imgWidth; - height=imgHeight; + if(this.settings.imageSize === 'default' && (width >= imgWidth || height >= imgHeight)) { + width = imgWidth; + height = imgHeight; } } @@ -317,7 +317,7 @@ markup : function() { this.elems.domContainer.addClass('chocolat-open ' + this.settings.className); - if(this.settings.fullWindow == 'cover') { + if(this.settings.imageSize == 'cover') { this.elems.domContainer.addClass('chocolat-cover'); } if(this.settings.container !== window) { @@ -572,8 +572,8 @@ }, zoomIn : function (e) { - this.settings.initialZoomState = this.settings.fullWindow - this.settings.fullWindow = 'native'; + this.settings.initialZoomState = this.settings.imageSize + this.settings.imageSize = 'native'; var event = $.Event('mousemove'); event.pageX = e.pageX; @@ -592,7 +592,7 @@ } var duration = duration || this.settings.duration - this.settings.fullWindow = this.settings.initialZoomState + this.settings.imageSize = this.settings.initialZoomState this.settings.initialZoomState = null this.elems.img.animate({'margin': 0}, duration) diff --git a/dist/js/jquery.chocolat.min.js b/dist/js/jquery.chocolat.min.js index 60c1eca..621ef4a 100644 --- a/dist/js/jquery.chocolat.min.js +++ b/dist/js/jquery.chocolat.min.js @@ -1 +1 @@ -!function(t,e,i,s){function n(e,i){var s=this;return this.settings=i,this._defaults=l,this.elems={},!this.settings.setTitle&&e.data("chocolat-title")&&(this.settings.setTitle=e.data("chocolat-title")),e.find(this.settings.imageSelector).each(function(){s.settings.images.push({title:t(this).attr("title"),src:t(this).attr("href"),height:!1,width:!1})}),e.find(this.settings.imageSelector).each(function(e){t(this).off("click").on("click",function(t){s.init(e),t.preventDefault()})}),this}var o=0,l={container:e,imageSelector:".chocolat-image",className:"",fullWindow:!1,initialZoomState:null,fullScreen:!1,loop:!1,linkImages:!0,duration:300,setTitle:"",separator2:"/",setIndex:0,firstImage:0,lastImage:!1,currentImage:!1,initialized:!1,timer:!1,timerDebounce:!1,images:[]};t.extend(n.prototype,{init:function(t){return this.settings.initialized||(this.setDomContainer(),this.markup(),this.events(),this.settings.lastImage=this.settings.images.length-1,this.settings.initialized=!0),this.load(t)},preload:function(e){var i=t.Deferred();if("undefined"!=typeof this.settings.images[e]){var s=new Image;return s.onload=function(){i.resolve(s)},s.src=this.settings.images[e].src,i}},load:function(e){var i=this;if(this.settings.fullScreen&&this.openFullScreen(),this.settings.currentImage!==e){this.elems.overlay.fadeIn(800),this.settings.timer=setTimeout(function(){"undefined"!=typeof i.elems&&t.proxy(i.elems.loader.fadeIn(),i)},800);var s=this.preload(e).then(function(t){return i.place(e,t)}).then(function(t){return i.appear(e)}).then(function(t){i.zoomable()}),n=e+1;return"undefined"!=typeof this.settings.images[n]&&this.preload(n),s}},place:function(t,e){var i=this;return this.settings.currentImage=t,this.description(),this.pagination(),this.arrows(),this.storeImgSize(e,t),fitting=this.fit(t,i.settings.container),this.center(fitting.width,fitting.height,fitting.left,fitting.top,0)},center:function(t,e,i,s,n){return this.elems.content.css("overflow","visible").animate({width:t,height:e,left:i,top:s},n).promise()},appear:function(t){var e=this;clearTimeout(this.settings.timer),this.elems.loader.stop().fadeOut(300,function(){e.elems.img.attr("src",e.settings.images[t].src)})},fit:function(e,i){var s=this.settings.images[e].height,n=this.settings.images[e].width,o=t(i).height(),l=t(i).width(),a=this.getOutMarginH(),h=this.getOutMarginW(),r=l-h,c=o-a,g=c/r,m=o/l,u=s/n;return"cover"==this.settings.fullWindow?m>u?(height=o,width=height/u):(width=l,height=width*u):"native"==this.settings.fullWindow?(height=s,width=n):(u>g?(height=c,width=height/u):(width=r,height=width*u),!this.settings.fullWindow&&(width>=n||height>=s)&&(width=n,height=s)),{height:height,width:width,top:(o-height)/2,left:(l-width)/2}},change:function(t){this.zoomOut(0),this.zoomable();var e=this.settings.currentImage+parseInt(t);if(e>this.settings.lastImage){if(this.settings.loop)return this.load(0)}else{if(!(0>e))return this.load(e);if(this.settings.loop)return this.load(this.settings.lastImage)}},arrows:function(){this.settings.loop?t([this.elems.left[0],this.elems.right[0]]).addClass("active"):this.settings.linkImages?(this.settings.currentImage==this.settings.lastImage?this.elems.right.removeClass("active"):this.elems.right.addClass("active"),0==this.settings.currentImage?this.elems.left.removeClass("active"):this.elems.left.addClass("active")):t([this.elems.left[0],this.elems.right[0]]).removeClass("active")},description:function(){var t=this;this.elems.description.html(t.settings.images[t.settings.currentImage].title)},pagination:function(){var t=this,e=this.settings.lastImage+1,i=this.settings.currentImage+1;this.elems.pagination.html(i+" "+t.settings.separator2+e)},storeImgSize:function(t,e){"undefined"!=typeof t&&(this.settings.images[e].height&&this.settings.images[e].width||(this.settings.images[e].height=t.height,this.settings.images[e].width=t.width))},close:function(){if(this.settings.fullscreenOpen)return void this.exitFullScreen();var e=[this.elems.overlay[0],this.elems.loader[0],this.elems.wrapper[0]],i=this,s=t.when(t(e).fadeOut(200)).done(function(){i.elems.domContainer.removeClass("chocolat-open chocolat-mobile chocolat-in-container chocolat-cover")});return this.settings.currentImage=!1,this.settings.initialized=!1,s},getOutMarginW:function(){var t=this.elems.left.outerWidth(!0),e=this.elems.right.outerWidth(!0);return t+e},getOutMarginH:function(){return this.elems.top.outerHeight(!0)+this.elems.bottom.outerHeight(!0)},markup:function(){this.elems.domContainer.addClass("chocolat-open "+this.settings.className),"cover"==this.settings.fullWindow&&this.elems.domContainer.addClass("chocolat-cover"),this.settings.container!==e&&this.elems.domContainer.addClass("chocolat-in-container");this.elems.wrapper=t("
",{"class":"chocolat-wrapper",id:"chocolat-content-"+this.settings.setIndex}).appendTo(this.elems.domContainer),this.elems.overlay=t("
",{"class":"chocolat-overlay"}).appendTo(this.elems.wrapper),this.elems.loader=t("
",{"class":"chocolat-loader"}).appendTo(this.elems.wrapper),this.elems.content=t("
",{"class":"chocolat-content"}).appendTo(this.elems.wrapper),this.elems.img=t("",{"class":"chocolat-img",src:""}).appendTo(this.elems.content),this.elems.top=t("
",{"class":"chocolat-top"}).appendTo(this.elems.wrapper),this.elems.left=t("
",{"class":"chocolat-left"}).appendTo(this.elems.wrapper),this.elems.right=t("
",{"class":"chocolat-right"}).appendTo(this.elems.wrapper),this.elems.bottom=t("
",{"class":"chocolat-bottom"}).appendTo(this.elems.wrapper),this.elems.fullscreen=t("",{"class":"chocolat-fullscreen"}).appendTo(this.elems.bottom),this.elems.description=t("",{"class":"chocolat-description"}).appendTo(this.elems.bottom),this.elems.pagination=t("",{"class":"chocolat-pagination"}).appendTo(this.elems.bottom),this.elems.setTitle=t("",{"class":"chocolat-set-title",html:this.settings.setTitle}).appendTo(this.elems.bottom),this.elems.close=t("",{"class":"chocolat-close"}).appendTo(this.elems.top)},openFullScreen:function(){var t=this.elems.wrapper[0];t.requestFullscreen?(this.settings.fullscreenOpen=!0,t.requestFullscreen()):t.mozRequestFullScreen?(this.settings.fullscreenOpen=!0,t.mozRequestFullScreen()):t.webkitRequestFullscreen?(this.settings.fullscreenOpen=!0,t.webkitRequestFullscreen()):t.msRequestFullscreen?(t.msRequestFullscreen(),this.settings.fullscreenOpen=!0):this.settings.fullscreenOpen=!1},exitFullScreen:function(){i.exitFullscreen?(i.exitFullscreen(),this.settings.fullscreenOpen=!1):i.mozCancelFullScreen?(i.mozCancelFullScreen(),this.settings.fullscreenOpen=!1):i.webkitExitFullscreen?(i.webkitExitFullscreen(),this.settings.fullscreenOpen=!1):this.settings.fullscreenOpen=!0},events:function(){var s=this;t(i).off("keydown.chocolat").on("keydown.chocolat",function(t){s.settings.initialized&&(37==t.keyCode?s.change(-1):39==t.keyCode?s.change(1):27==t.keyCode&&s.close())}),this.elems.wrapper.find(".chocolat-right").off("click.chocolat").on("click.chocolat",function(){s.change(1)}),this.elems.wrapper.find(".chocolat-left").off("click.chocolat").on("click.chocolat",function(){return s.change(-1)}),t([this.elems.overlay[0],this.elems.close[0]]).off("click.chocolat").on("click.chocolat",function(){return s.close()}),this.elems.fullscreen.off("click.chocolat").on("click.chocolat",function(){return s.settings.fullscreenOpen?void s.exitFullScreen():void s.openFullScreen()}),s.settings.backgroundClose&&this.elems.overlay.off("click.chocolat").on("click.chocolat",function(){return s.close()}),this.elems.wrapper.find(".chocolat-img").off("click.chocolat").on("click.chocolat",function(t){return null===s.settings.initialZoomState&&s.elems.domContainer.hasClass("chocolat-zoomable")?s.zoomIn(t):s.zoomOut(t)}),this.elems.wrapper.mousemove(function(e){if(null!==s.settings.initialZoomState&&!s.elems.img.is(":animated")){var i=t(this).offset(),n=t(this).height(),o=t(this).width(),l=s.settings.images[s.settings.currentImage],a=l.width,h=l.height,r=[e.pageX-o/2-i.left,e.pageY-n/2-i.top],c=0;a>o&&(c=r[0]/(o/2),c=(a-o+0)/2*c);var g=0;h>n&&(g=r[1]/(n/2),g=(h-n+0)/2*g);var m={"margin-left":-c+"px","margin-top":-g+"px"};"undefined"!=typeof e.duration?t(s.elems.img).stop(!1,!0).animate(m,e.duration):t(s.elems.img).stop(!1,!0).css(m)}}),t(e).on("resize",function(){s.settings.initialized&&s.debounce(50,function(){fitting=s.fit(s.settings.currentImage,s.settings.container),s.center(fitting.width,fitting.height,fitting.left,fitting.top,0),s.zoomable()})})},zoomable:function(){var t=this.settings.images[this.settings.currentImage],e=this.elems.wrapper.width(),i=this.elems.wrapper.height(),s=t.width>e||t.height>i,n=this.elems.img.width()>t.width||this.elems.img.height()>t.height;s&&!n?this.elems.domContainer.addClass("chocolat-zoomable"):this.elems.domContainer.removeClass("chocolat-zoomable")},zoomIn:function(e){this.settings.initialZoomState=this.settings.fullWindow,this.settings.fullWindow="native";var i=t.Event("mousemove");return i.pageX=e.pageX,i.pageY=e.pageY,i.duration=this.settings.duration,this.elems.wrapper.trigger(i),this.elems.domContainer.addClass("chocolat-zoomed"),fitting=this.fit(this.settings.currentImage,this.settings.container),this.center(fitting.width,fitting.height,fitting.left,fitting.top,this.settings.duration)},zoomOut:function(t,e){if(null!==this.settings.initialZoomState){var e=e||this.settings.duration;return this.settings.fullWindow=this.settings.initialZoomState,this.settings.initialZoomState=null,this.elems.img.animate({margin:0},e),this.elems.domContainer.removeClass("chocolat-zoomed"),fitting=this.fit(this.settings.currentImage,this.settings.container),this.center(fitting.width,fitting.height,fitting.left,fitting.top,e)}},setDomContainer:function(){this.elems.domContainer=t(this.settings.container===e?"body":this.settings.container)},debounce:function(t,e){clearTimeout(this.settings.timerDebounce),this.settings.timerDebounce=setTimeout(function(){e()},t)},api:function(){var t=this;return{open:function(e){return e=parseInt(e)||0,t.init(e)},close:function(){return t.close()},next:function(){return t.change(1)},prev:function(){return t.change(-1)},"goto":function(e){return t.open(e)},current:function(){return t.settings.currentImage},place:function(){return t.place(t.settings.currentImage,t.settings.duration)},set:function(e,i){return t.settings[e]=i},get:function(e){return t.settings[e]},getElem:function(e){return t.elems[e]}}}}),t.fn.Chocolat=function(e){return this.each(function(){o++;var i=t.extend(!0,{},l,e,{setIndex:o});t.data(this,"chocolat")||t.data(this,"chocolat",new n(t(this),i))})}}(jQuery,window,document); \ No newline at end of file +!function(t,e,i,s){function n(e,i){var s=this;return this.settings=i,this._defaults=a,this.elems={},!this.settings.setTitle&&e.data("chocolat-title")&&(this.settings.setTitle=e.data("chocolat-title")),e.find(this.settings.imageSelector).each(function(){s.settings.images.push({title:t(this).attr("title"),src:t(this).attr("href"),height:!1,width:!1})}),e.find(this.settings.imageSelector).each(function(e){t(this).off("click").on("click",function(t){s.init(e),t.preventDefault()})}),this}var o=0,a={container:e,imageSelector:".chocolat-image",className:"",imageSize:"default",initialZoomState:null,fullScreen:!1,loop:!1,linkImages:!0,duration:300,setTitle:"",separator2:"/",setIndex:0,firstImage:0,lastImage:!1,currentImage:!1,initialized:!1,timer:!1,timerDebounce:!1,images:[]};t.extend(n.prototype,{init:function(t){return this.settings.initialized||(this.setDomContainer(),this.markup(),this.events(),this.settings.lastImage=this.settings.images.length-1,this.settings.initialized=!0),this.load(t)},preload:function(e){var i=t.Deferred();if("undefined"!=typeof this.settings.images[e]){var s=new Image;return s.onload=function(){i.resolve(s)},s.src=this.settings.images[e].src,i}},load:function(e){var i=this;if(this.settings.fullScreen&&this.openFullScreen(),this.settings.currentImage!==e){this.elems.overlay.fadeIn(800),this.settings.timer=setTimeout(function(){"undefined"!=typeof i.elems&&t.proxy(i.elems.loader.fadeIn(),i)},800);var s=this.preload(e).then(function(t){return i.place(e,t)}).then(function(t){return i.appear(e)}).then(function(t){i.zoomable()}),n=e+1;return"undefined"!=typeof this.settings.images[n]&&this.preload(n),s}},place:function(t,e){var i=this;return this.settings.currentImage=t,this.description(),this.pagination(),this.arrows(),this.storeImgSize(e,t),fitting=this.fit(t,i.settings.container),this.center(fitting.width,fitting.height,fitting.left,fitting.top,0)},center:function(t,e,i,s,n){return this.elems.content.css("overflow","visible").animate({width:t,height:e,left:i,top:s},n).promise()},appear:function(t){var e=this;clearTimeout(this.settings.timer),this.elems.loader.stop().fadeOut(300,function(){e.elems.img.attr("src",e.settings.images[t].src)})},fit:function(e,i){var s=this.settings.images[e].height,n=this.settings.images[e].width,o=t(i).height(),a=t(i).width(),l=this.getOutMarginH(),h=this.getOutMarginW(),r=a-h,c=o-l,g=c/r,m=o/a,u=s/n;return"cover"==this.settings.imageSize?m>u?(height=o,width=height/u):(width=a,height=width*u):"native"==this.settings.imageSize?(height=s,width=n):(u>g?(height=c,width=height/u):(width=r,height=width*u),"default"===this.settings.imageSize&&(width>=n||height>=s)&&(width=n,height=s)),{height:height,width:width,top:(o-height)/2,left:(a-width)/2}},change:function(t){this.zoomOut(0),this.zoomable();var e=this.settings.currentImage+parseInt(t);if(e>this.settings.lastImage){if(this.settings.loop)return this.load(0)}else{if(!(0>e))return this.load(e);if(this.settings.loop)return this.load(this.settings.lastImage)}},arrows:function(){this.settings.loop?t([this.elems.left[0],this.elems.right[0]]).addClass("active"):this.settings.linkImages?(this.settings.currentImage==this.settings.lastImage?this.elems.right.removeClass("active"):this.elems.right.addClass("active"),0==this.settings.currentImage?this.elems.left.removeClass("active"):this.elems.left.addClass("active")):t([this.elems.left[0],this.elems.right[0]]).removeClass("active")},description:function(){var t=this;this.elems.description.html(t.settings.images[t.settings.currentImage].title)},pagination:function(){var t=this,e=this.settings.lastImage+1,i=this.settings.currentImage+1;this.elems.pagination.html(i+" "+t.settings.separator2+e)},storeImgSize:function(t,e){"undefined"!=typeof t&&(this.settings.images[e].height&&this.settings.images[e].width||(this.settings.images[e].height=t.height,this.settings.images[e].width=t.width))},close:function(){if(this.settings.fullscreenOpen)return void this.exitFullScreen();var e=[this.elems.overlay[0],this.elems.loader[0],this.elems.wrapper[0]],i=this,s=t.when(t(e).fadeOut(200)).done(function(){i.elems.domContainer.removeClass("chocolat-open chocolat-mobile chocolat-in-container chocolat-cover")});return this.settings.currentImage=!1,this.settings.initialized=!1,s},getOutMarginW:function(){var t=this.elems.left.outerWidth(!0),e=this.elems.right.outerWidth(!0);return t+e},getOutMarginH:function(){return this.elems.top.outerHeight(!0)+this.elems.bottom.outerHeight(!0)},markup:function(){this.elems.domContainer.addClass("chocolat-open "+this.settings.className),"cover"==this.settings.imageSize&&this.elems.domContainer.addClass("chocolat-cover"),this.settings.container!==e&&this.elems.domContainer.addClass("chocolat-in-container");this.elems.wrapper=t("
",{"class":"chocolat-wrapper",id:"chocolat-content-"+this.settings.setIndex}).appendTo(this.elems.domContainer),this.elems.overlay=t("
",{"class":"chocolat-overlay"}).appendTo(this.elems.wrapper),this.elems.loader=t("
",{"class":"chocolat-loader"}).appendTo(this.elems.wrapper),this.elems.content=t("
",{"class":"chocolat-content"}).appendTo(this.elems.wrapper),this.elems.img=t("",{"class":"chocolat-img",src:""}).appendTo(this.elems.content),this.elems.top=t("
",{"class":"chocolat-top"}).appendTo(this.elems.wrapper),this.elems.left=t("
",{"class":"chocolat-left"}).appendTo(this.elems.wrapper),this.elems.right=t("
",{"class":"chocolat-right"}).appendTo(this.elems.wrapper),this.elems.bottom=t("
",{"class":"chocolat-bottom"}).appendTo(this.elems.wrapper),this.elems.fullscreen=t("",{"class":"chocolat-fullscreen"}).appendTo(this.elems.bottom),this.elems.description=t("",{"class":"chocolat-description"}).appendTo(this.elems.bottom),this.elems.pagination=t("",{"class":"chocolat-pagination"}).appendTo(this.elems.bottom),this.elems.setTitle=t("",{"class":"chocolat-set-title",html:this.settings.setTitle}).appendTo(this.elems.bottom),this.elems.close=t("",{"class":"chocolat-close"}).appendTo(this.elems.top)},openFullScreen:function(){var t=this.elems.wrapper[0];t.requestFullscreen?(this.settings.fullscreenOpen=!0,t.requestFullscreen()):t.mozRequestFullScreen?(this.settings.fullscreenOpen=!0,t.mozRequestFullScreen()):t.webkitRequestFullscreen?(this.settings.fullscreenOpen=!0,t.webkitRequestFullscreen()):t.msRequestFullscreen?(t.msRequestFullscreen(),this.settings.fullscreenOpen=!0):this.settings.fullscreenOpen=!1},exitFullScreen:function(){i.exitFullscreen?(i.exitFullscreen(),this.settings.fullscreenOpen=!1):i.mozCancelFullScreen?(i.mozCancelFullScreen(),this.settings.fullscreenOpen=!1):i.webkitExitFullscreen?(i.webkitExitFullscreen(),this.settings.fullscreenOpen=!1):this.settings.fullscreenOpen=!0},events:function(){var s=this;t(i).off("keydown.chocolat").on("keydown.chocolat",function(t){s.settings.initialized&&(37==t.keyCode?s.change(-1):39==t.keyCode?s.change(1):27==t.keyCode&&s.close())}),this.elems.wrapper.find(".chocolat-right").off("click.chocolat").on("click.chocolat",function(){s.change(1)}),this.elems.wrapper.find(".chocolat-left").off("click.chocolat").on("click.chocolat",function(){return s.change(-1)}),t([this.elems.overlay[0],this.elems.close[0]]).off("click.chocolat").on("click.chocolat",function(){return s.close()}),this.elems.fullscreen.off("click.chocolat").on("click.chocolat",function(){return s.settings.fullscreenOpen?void s.exitFullScreen():void s.openFullScreen()}),s.settings.backgroundClose&&this.elems.overlay.off("click.chocolat").on("click.chocolat",function(){return s.close()}),this.elems.wrapper.find(".chocolat-img").off("click.chocolat").on("click.chocolat",function(t){return null===s.settings.initialZoomState&&s.elems.domContainer.hasClass("chocolat-zoomable")?s.zoomIn(t):s.zoomOut(t)}),this.elems.wrapper.mousemove(function(e){if(null!==s.settings.initialZoomState&&!s.elems.img.is(":animated")){var i=t(this).offset(),n=t(this).height(),o=t(this).width(),a=s.settings.images[s.settings.currentImage],l=a.width,h=a.height,r=[e.pageX-o/2-i.left,e.pageY-n/2-i.top],c=0;l>o&&(c=r[0]/(o/2),c=(l-o+0)/2*c);var g=0;h>n&&(g=r[1]/(n/2),g=(h-n+0)/2*g);var m={"margin-left":-c+"px","margin-top":-g+"px"};"undefined"!=typeof e.duration?t(s.elems.img).stop(!1,!0).animate(m,e.duration):t(s.elems.img).stop(!1,!0).css(m)}}),t(e).on("resize",function(){s.settings.initialized&&s.debounce(50,function(){fitting=s.fit(s.settings.currentImage,s.settings.container),s.center(fitting.width,fitting.height,fitting.left,fitting.top,0),s.zoomable()})})},zoomable:function(){var t=this.settings.images[this.settings.currentImage],e=this.elems.wrapper.width(),i=this.elems.wrapper.height(),s=t.width>e||t.height>i,n=this.elems.img.width()>t.width||this.elems.img.height()>t.height;s&&!n?this.elems.domContainer.addClass("chocolat-zoomable"):this.elems.domContainer.removeClass("chocolat-zoomable")},zoomIn:function(e){this.settings.initialZoomState=this.settings.imageSize,this.settings.imageSize="native";var i=t.Event("mousemove");return i.pageX=e.pageX,i.pageY=e.pageY,i.duration=this.settings.duration,this.elems.wrapper.trigger(i),this.elems.domContainer.addClass("chocolat-zoomed"),fitting=this.fit(this.settings.currentImage,this.settings.container),this.center(fitting.width,fitting.height,fitting.left,fitting.top,this.settings.duration)},zoomOut:function(t,e){if(null!==this.settings.initialZoomState){var e=e||this.settings.duration;return this.settings.imageSize=this.settings.initialZoomState,this.settings.initialZoomState=null,this.elems.img.animate({margin:0},e),this.elems.domContainer.removeClass("chocolat-zoomed"),fitting=this.fit(this.settings.currentImage,this.settings.container),this.center(fitting.width,fitting.height,fitting.left,fitting.top,e)}},setDomContainer:function(){this.elems.domContainer=t(this.settings.container===e?"body":this.settings.container)},debounce:function(t,e){clearTimeout(this.settings.timerDebounce),this.settings.timerDebounce=setTimeout(function(){e()},t)},api:function(){var t=this;return{open:function(e){return e=parseInt(e)||0,t.init(e)},close:function(){return t.close()},next:function(){return t.change(1)},prev:function(){return t.change(-1)},"goto":function(e){return t.open(e)},current:function(){return t.settings.currentImage},place:function(){return t.place(t.settings.currentImage,t.settings.duration)},set:function(e,i){return t.settings[e]=i},get:function(e){return t.settings[e]},getElem:function(e){return t.elems[e]}}}}),t.fn.Chocolat=function(e){return this.each(function(){o++;var i=t.extend(!0,{},a,e,{setIndex:o});t.data(this,"chocolat")||t.data(this,"chocolat",new n(t(this),i))})}}(jQuery,window,document); \ No newline at end of file diff --git a/readme.md b/readme.md index 21310ec..3334bcf 100644 --- a/readme.md +++ b/readme.md @@ -33,8 +33,9 @@ $(document).ready(function(){ ##Documentation ----------- -### Parameters -**container : ** `default:window` +### Parameters + +**container :** `default:window` Sets whether viewer will open and fill the whole page (`default`) , or whether it should open in a particular block of the page. For example ` #container2` in this case the height and width of the block must be defined. values can be : window, selector, jQuery element, or a node @@ -51,9 +52,9 @@ Title of the set. Can also be defined from the html, with the `data-chocolat-tit **className :** `default : ''` Add a custom css class to the parent of the lightbox -**fullWindow :** `default : false` -Can be `false`, `'contain'`, `'native'`, or `'cover'`. -`false` : if the image is bigger than the window it's resized to fit, else if the image is smaller than the window it's not streched, only displayed at native dimensions +**imageSize :** `default : 'default'` +Can be `'default'`, `'contain'`, `'native'`, or `'cover'`. +`default` : if the image is bigger than the window it's resized to fit, else if the image is smaller than the window it's not streched, only displayed at native dimensions `'contain'` : if the image is bigger than the window it's resized to fit, else if the image is smaller than the window it's streched, to fit the window `'cover'` : the image cover the window, no white space are displayed. more informations & exemple about contain/cover : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images @@ -150,7 +151,7 @@ Set to the container when its width is inferior to `480px` (or `mobileBreakpoint Set to the container when chocolat is open in a block (`container != window`) **.chocolat-cover :** -Set to the container when chocolat `fullWindow` is set to `'cover'` +Set to the container when chocolat `imageSize` is set to `'cover'` **.chocolat-zoomable :** Set to the container when chocolat is zoomable diff --git a/src/js/jquery.chocolat.js b/src/js/jquery.chocolat.js index 0f955f1..a5e8503 100644 --- a/src/js/jquery.chocolat.js +++ b/src/js/jquery.chocolat.js @@ -4,7 +4,7 @@ container : window, // window or jquery object or jquery selector, or element imageSelector : '.chocolat-image', className : '', - fullWindow : false, // false, 'contain', 'cover' or 'native' + imageSize : 'default', // 'default', 'contain', 'cover' or 'native' initialZoomState : null, fullScreen : false, loop : false, @@ -172,7 +172,7 @@ var holderRatio = (holderHeight / holderWidth); var imgRatio = (imgHeight / imgWidth); - if(this.settings.fullWindow == 'cover') { + if(this.settings.imageSize == 'cover') { if(imgRatio < holderRatio) { height = holderHeight; width = height / imgRatio; @@ -182,7 +182,7 @@ height = width * imgRatio; } } - else if(this.settings.fullWindow == 'native') { + else if(this.settings.imageSize == 'native') { height = imgHeight; width = imgWidth; } @@ -195,9 +195,9 @@ width = holderGlobalWidth; height = width * imgRatio; } - if(!this.settings.fullWindow && (width >= imgWidth || height >= imgHeight)) { - width=imgWidth; - height=imgHeight; + if(this.settings.imageSize === 'default' && (width >= imgWidth || height >= imgHeight)) { + width = imgWidth; + height = imgHeight; } } @@ -317,7 +317,7 @@ markup : function() { this.elems.domContainer.addClass('chocolat-open ' + this.settings.className); - if(this.settings.fullWindow == 'cover') { + if(this.settings.imageSize == 'cover') { this.elems.domContainer.addClass('chocolat-cover'); } if(this.settings.container !== window) { @@ -572,8 +572,8 @@ }, zoomIn : function (e) { - this.settings.initialZoomState = this.settings.fullWindow - this.settings.fullWindow = 'native'; + this.settings.initialZoomState = this.settings.imageSize + this.settings.imageSize = 'native'; var event = $.Event('mousemove'); event.pageX = e.pageX; @@ -592,7 +592,7 @@ } var duration = duration || this.settings.duration - this.settings.fullWindow = this.settings.initialZoomState + this.settings.imageSize = this.settings.initialZoomState this.settings.initialZoomState = null this.elems.img.animate({'margin': 0}, duration) diff --git a/test/test.chocolat.coffee b/test/test.chocolat.coffee index bd73109..0ef0e3c 100644 --- a/test/test.chocolat.coffee +++ b/test/test.chocolat.coffee @@ -51,12 +51,12 @@ describe "Chocolat", -> it "should add css classes to body when full window", (done) -> chocolat = $('#example0').Chocolat({ - fullWindow : 'cover' + imageSize : 'cover' }).data('chocolat') chocolat.api().open().done( -> expect($('body').hasClass('chocolat-open')).to.be.true - expect($('body').hasClass('chocolat-' + chocolat.settings.fullWindow)).to.be.true + expect($('body').hasClass('chocolat-' + chocolat.settings.imageSize)).to.be.true # expect($('#container').hasClass('chocolat-zoomable')).to.be.true done() ) @@ -287,7 +287,7 @@ describe "Chocolat", -> ) - describe "FullWindow cover", -> + describe "imageSize cover", -> afterEach -> chocolat = $('#example0').data('chocolat') @@ -300,17 +300,17 @@ describe "Chocolat", -> $('#example0').data('chocolat', null) it "should add class chocolat-cover to parent", (done) -> - chocolat = $('#example0').Chocolat({fullWindow: 'cover'}).data('chocolat') + chocolat = $('#example0').Chocolat({imageSize: 'cover'}).data('chocolat') chocolat.api().open().done( -> - expect(chocolat.api().get('fullWindow')).to.equal('cover') + expect(chocolat.api().get('imageSize')).to.equal('cover') expect(chocolat.api().getElem('domContainer').hasClass('chocolat-cover')).to.be.true done() ) it "should have shortest side of the container equal to shortest side to the image in container", (done) -> chocolat = $('#example0').Chocolat({ - fullWindow: 'cover' + imageSize: 'cover' container: '#container' }).data('chocolat') @@ -340,7 +340,7 @@ describe "Chocolat", -> it "should have shortest side of the container equal to shortest side to the image in window", (done) -> chocolat = $('#example0').Chocolat({ - fullWindow: 'cover' + imageSize: 'cover' }).data('chocolat') chocolat.api().open().done( ->