From 4f5b79bbc6cffea61d358ce93dd59bd3c3737f45 Mon Sep 17 00:00:00 2001
From: Nicolas Turlais <nicolas.turlais@gmail.com>
Date: Sun, 19 Jul 2015 13:54:45 +0200
Subject: [PATCH] improved demo

---
 bower.json                       |   2 +-
 dist/css/chocolat.css            |   8 +++++---
 dist/images/fullscreen-black.png | Bin 0 -> 658 bytes
 dist/index.html                  |  32 +++++++++++++++++++------------
 dist/js/jquery.chocolat.js       |   6 +++---
 dist/js/jquery.chocolat.min.js   |   2 +-
 package.json                     |   2 +-
 src/css/chocolat.css             |   8 +++++---
 src/images/fullscreen-black.png  | Bin 0 -> 658 bytes
 src/js/jquery.chocolat.js        |   6 +++---
 10 files changed, 39 insertions(+), 27 deletions(-)
 create mode 100644 dist/images/fullscreen-black.png
 create mode 100644 src/images/fullscreen-black.png

diff --git a/bower.json b/bower.json
index b109325..c329420 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "chocolat",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "main": [
     "dist/css/chocolat.css",
     "dist/js/jquery.chocolat.js"
diff --git a/dist/css/chocolat.css b/dist/css/chocolat.css
index 3991176..12dc2dc 100644
--- a/dist/css/chocolat.css
+++ b/dist/css/chocolat.css
@@ -104,6 +104,7 @@ html, body, div, span{
     height:50px;
     overflow: hidden;
     z-index: 17;
+    margin-bottom: 10px;
 }
 .chocolat-wrapper .chocolat-close{
     width:50px;
@@ -119,14 +120,15 @@ html, body, div, span{
     bottom:0;
     left: 0;
     right: 0;
-    line-height:50px;
-    height:50px;
+    line-height:40px;
+    height:40px;
     font-size:12px;
     z-index: 17;
     padding-left: 15px;
     padding-right: 15px;
     background: rgba(0, 0, 0, 0.2);
     text-align: right;
+    margin-top: 10px;
 }
 .chocolat-wrapper .chocolat-set-title{
     display: inline-block;
@@ -144,7 +146,7 @@ html, body, div, span{
 }
 .chocolat-wrapper .chocolat-fullscreen{
     width: 16px;
-    height: 50px;
+    height: 40px;
     background: url(../images/fullscreen.png) 50% 50% no-repeat;
     display: block;
     margin:auto;
diff --git a/dist/images/fullscreen-black.png b/dist/images/fullscreen-black.png
new file mode 100644
index 0000000000000000000000000000000000000000..14c2f63e3a51e22910ced6624671125c257bfaba
GIT binary patch
literal 658
zcmV;D0&V??P)<h;3K|Lk000e1NJLTq000mG000aK1^@s6Yv(<I00009a7bBm000XU
z000XU0RWnu7ytkP+G#^WP*7-ZbZ>KLZ*U+<Lqi~Na&Km7Y-Iodc-ozkO>0v@6o#Kk
zBy~|skq9maHzpVb!A%szeAFnH;fC8TlHlg{&NR8$`@v*xZFhqH4E+Z#x^m|~@B=Bh
z_D6`z#6^szN*C?3dS~Xmobz%9%J006+AeKEk~$mo+Hx=)$+gd{Be=?au7%MwSKE(w
z06f3j3Vfybi-4cs5CA8)JipuGe5^;gbs(z16K$puh-bj77cO@oz5`Xe6LdiQ05--e
zdUr+J!EgknOF(tJ(AR<L?m{<!s!mc3rAI)j6Rn|i417(JOhfrKP;=(c0d%tb$j0M|
zleMTWx5BAQ!c=;h4xh_TmgHf2)R1?Z&1OS}`}@+y<B6L}Yo^8?7=4FD767jFZPuS;
zE|Wp8y$rrFo72aV(Pu)2BSR9<qkX35ybOjTxln(0)QAduu-u*av|97=9z6YU+IQm(
zynlH5?s5gFz{%~Ej1|xCw!CHIwb>jGpDr!D|DP|)O23<d*)!Ipk&%Ak^1?}FbX+7-
z8E50D7WhilrCd5|vpE5VJq#8@N`yh;Q{c!ca7YveO-w=Z`{c01MAQiIQ7Gz2<OL=;
zi^bmqsBFU9vJgTXe|hlo-@0F_LYb)%^n^J8001CkNK#Dz0EY?y0E`U)0UrGT0B52A
z06tg%0Z2yx01iw5000V{ww+Y~001&cL_t(|+G1p2VEE5KA)v&7|4fwHKJW&xP#Qig
sL|DQ&%ma~P0~jey$^ZZW0RR630HWds6!;)bSO5S307*qoM6N<$g5>rd6951J

literal 0
HcmV?d00001

diff --git a/dist/index.html b/dist/index.html
index 583b58d..ec0c4b3 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -8,6 +8,8 @@
         <style>
             body {
                 text-align: center;
+                font-family: Arial;
+                font-size: 12px;
             }
             h2 {
                 padding-top:20px;
@@ -15,6 +17,11 @@
                 font-weight: normal;
                 border-top:1px solid #eeeeee;
             }
+            a {
+                border:0;
+                color: #2645FF;
+                text-decoration: none;
+            }
         </style>
         <title>Chocolat — demo</title>
         <script>
@@ -75,40 +82,41 @@ <h2>
         </div>
 
         <h2>
-            Display in a container, looping :  
+            Display in a container, cover, with thumbnails :  
         </h2>
 
-        <div id="example2" data-chocolat-title="set title">
+        <div id="example3" data-chocolat-title="set title">
             <a class="chocolat-image" href="demo-images/3.jpg" title="Rose">
-                A
+                <img src="demo-images/3.jpg" style="width:75px; height:50px" alt="">
             </a>
             <a class="chocolat-image" href="demo-images/4.jpg" title="Black">
-                B
+                <img src="demo-images/4.jpg" style="width:75px; height:50px" alt="">
             </a>
             <a class="chocolat-image" href="demo-images/5.jpg" title="Yellow">
-                C
+                <img src="demo-images/5.jpg" style="width:75px; height:50px" alt="">
             </a>
         </div>
         <!-- Container (notice the relative width) :  -->
-        <div id="container1" style="width: 80%; max-width:1000px; height: 600px;background: #E0E0E0;margin:auto;"></div>
+        <div id="container2" style="width: 80%; max-width:1000px; height: 600px;background: #E0E0E0;margin:auto;"></div>
 
         <h2>
-            Display in a container, cover, with thumbnails :  
+            Display in a container, looping :  
         </h2>
 
-        <div id="example3" data-chocolat-title="set title">
+        <div id="example2" data-chocolat-title="set title">
             <a class="chocolat-image" href="demo-images/3.jpg" title="Rose">
-                <img src="demo-images/3.jpg" style="width:75px; height:50px" alt="">
+                A
             </a>
             <a class="chocolat-image" href="demo-images/4.jpg" title="Black">
-                <img src="demo-images/4.jpg" style="width:75px; height:50px" alt="">
+                B
             </a>
             <a class="chocolat-image" href="demo-images/5.jpg" title="Yellow">
-                <img src="demo-images/5.jpg" style="width:75px; height:50px" alt="">
+                C
             </a>
         </div>
         <!-- Container (notice the relative width) :  -->
-        <div id="container2" style="width: 80%; max-width:1000px; height: 600px;background: #E0E0E0;margin:auto;"></div>
+        <div id="container1" style="width: 80%; max-width:1000px; height: 600px;background: #E0E0E0;margin:auto;"></div>
+
 
         <h2>
             API use, in container, see code source <br>
diff --git a/dist/js/jquery.chocolat.js b/dist/js/jquery.chocolat.js
index 2efbe74..1725592 100644
--- a/dist/js/jquery.chocolat.js
+++ b/dist/js/jquery.chocolat.js
@@ -306,13 +306,13 @@
         },
 
         getOutMarginW : function() {
-            var left  = this.elems.left.outerWidth();
-            var right = this.elems.right.outerWidth();
+            var left  = this.elems.left.outerWidth(true);
+            var right = this.elems.right.outerWidth(true);
             return left + right;
         },
 
         getOutMarginH : function() {
-            return this.elems.top.outerHeight() + this.elems.bottom.outerHeight();
+            return this.elems.top.outerHeight(true) + this.elems.bottom.outerHeight(true);
         },
 
         markup : function() {
diff --git a/dist/js/jquery.chocolat.min.js b/dist/js/jquery.chocolat.min.js
index 3636321..08411ad 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(),e=this.elems.right.outerWidth();return t+e},getOutMarginH:function(){return this.elems.top.outerHeight()+this.elems.bottom.outerHeight()},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("<div/>",{"class":"chocolat-wrapper"}).appendTo(this.elems.domContainer),this.elems.overlay=t("<div/>",{"class":"chocolat-overlay"}).appendTo(this.elems.wrapper),this.elems.loader=t("<div/>",{"class":"chocolat-loader"}).appendTo(this.elems.wrapper),this.elems.content=t("<div/>",{"class":"chocolat-content",id:"chocolat-content-"+this.settings.setIndex}).appendTo(this.elems.wrapper),this.elems.img=t("<img/>",{"class":"chocolat-img",src:""}).appendTo(this.elems.content),this.elems.top=t("<div/>",{"class":"chocolat-top"}).appendTo(this.elems.wrapper),this.elems.left=t("<div/>",{"class":"chocolat-left"}).appendTo(this.elems.wrapper),this.elems.right=t("<div/>",{"class":"chocolat-right"}).appendTo(this.elems.wrapper),this.elems.bottom=t("<div/>",{"class":"chocolat-bottom"}).appendTo(this.elems.wrapper),this.elems.fullscreen=t("<span/>",{"class":"chocolat-fullscreen"}).appendTo(this.elems.bottom),this.elems.description=t("<span/>",{"class":"chocolat-description"}).appendTo(this.elems.bottom),this.elems.pagination=t("<span/>",{"class":"chocolat-pagination"}).appendTo(this.elems.bottom),this.elems.setTitle=t("<span/>",{"class":"chocolat-set-title",html:this.settings.setTitle}).appendTo(this.elems.bottom),this.elems.close=t("<span/>",{"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=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("<div/>",{"class":"chocolat-wrapper"}).appendTo(this.elems.domContainer),this.elems.overlay=t("<div/>",{"class":"chocolat-overlay"}).appendTo(this.elems.wrapper),this.elems.loader=t("<div/>",{"class":"chocolat-loader"}).appendTo(this.elems.wrapper),this.elems.content=t("<div/>",{"class":"chocolat-content",id:"chocolat-content-"+this.settings.setIndex}).appendTo(this.elems.wrapper),this.elems.img=t("<img/>",{"class":"chocolat-img",src:""}).appendTo(this.elems.content),this.elems.top=t("<div/>",{"class":"chocolat-top"}).appendTo(this.elems.wrapper),this.elems.left=t("<div/>",{"class":"chocolat-left"}).appendTo(this.elems.wrapper),this.elems.right=t("<div/>",{"class":"chocolat-right"}).appendTo(this.elems.wrapper),this.elems.bottom=t("<div/>",{"class":"chocolat-bottom"}).appendTo(this.elems.wrapper),this.elems.fullscreen=t("<span/>",{"class":"chocolat-fullscreen"}).appendTo(this.elems.bottom),this.elems.description=t("<span/>",{"class":"chocolat-description"}).appendTo(this.elems.bottom),this.elems.pagination=t("<span/>",{"class":"chocolat-pagination"}).appendTo(this.elems.bottom),this.elems.setTitle=t("<span/>",{"class":"chocolat-set-title",html:this.settings.setTitle}).appendTo(this.elems.bottom),this.elems.close=t("<span/>",{"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
diff --git a/package.json b/package.json
index c23d625..58a1c60 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chocolat",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "description": " Responsive jQuery Lightbox Plugin",
   "main": [
     "css/chocolat.css",
diff --git a/src/css/chocolat.css b/src/css/chocolat.css
index 3991176..12dc2dc 100644
--- a/src/css/chocolat.css
+++ b/src/css/chocolat.css
@@ -104,6 +104,7 @@ html, body, div, span{
     height:50px;
     overflow: hidden;
     z-index: 17;
+    margin-bottom: 10px;
 }
 .chocolat-wrapper .chocolat-close{
     width:50px;
@@ -119,14 +120,15 @@ html, body, div, span{
     bottom:0;
     left: 0;
     right: 0;
-    line-height:50px;
-    height:50px;
+    line-height:40px;
+    height:40px;
     font-size:12px;
     z-index: 17;
     padding-left: 15px;
     padding-right: 15px;
     background: rgba(0, 0, 0, 0.2);
     text-align: right;
+    margin-top: 10px;
 }
 .chocolat-wrapper .chocolat-set-title{
     display: inline-block;
@@ -144,7 +146,7 @@ html, body, div, span{
 }
 .chocolat-wrapper .chocolat-fullscreen{
     width: 16px;
-    height: 50px;
+    height: 40px;
     background: url(../images/fullscreen.png) 50% 50% no-repeat;
     display: block;
     margin:auto;
diff --git a/src/images/fullscreen-black.png b/src/images/fullscreen-black.png
new file mode 100644
index 0000000000000000000000000000000000000000..14c2f63e3a51e22910ced6624671125c257bfaba
GIT binary patch
literal 658
zcmV;D0&V??P)<h;3K|Lk000e1NJLTq000mG000aK1^@s6Yv(<I00009a7bBm000XU
z000XU0RWnu7ytkP+G#^WP*7-ZbZ>KLZ*U+<Lqi~Na&Km7Y-Iodc-ozkO>0v@6o#Kk
zBy~|skq9maHzpVb!A%szeAFnH;fC8TlHlg{&NR8$`@v*xZFhqH4E+Z#x^m|~@B=Bh
z_D6`z#6^szN*C?3dS~Xmobz%9%J006+AeKEk~$mo+Hx=)$+gd{Be=?au7%MwSKE(w
z06f3j3Vfybi-4cs5CA8)JipuGe5^;gbs(z16K$puh-bj77cO@oz5`Xe6LdiQ05--e
zdUr+J!EgknOF(tJ(AR<L?m{<!s!mc3rAI)j6Rn|i417(JOhfrKP;=(c0d%tb$j0M|
zleMTWx5BAQ!c=;h4xh_TmgHf2)R1?Z&1OS}`}@+y<B6L}Yo^8?7=4FD767jFZPuS;
zE|Wp8y$rrFo72aV(Pu)2BSR9<qkX35ybOjTxln(0)QAduu-u*av|97=9z6YU+IQm(
zynlH5?s5gFz{%~Ej1|xCw!CHIwb>jGpDr!D|DP|)O23<d*)!Ipk&%Ak^1?}FbX+7-
z8E50D7WhilrCd5|vpE5VJq#8@N`yh;Q{c!ca7YveO-w=Z`{c01MAQiIQ7Gz2<OL=;
zi^bmqsBFU9vJgTXe|hlo-@0F_LYb)%^n^J8001CkNK#Dz0EY?y0E`U)0UrGT0B52A
z06tg%0Z2yx01iw5000V{ww+Y~001&cL_t(|+G1p2VEE5KA)v&7|4fwHKJW&xP#Qig
sL|DQ&%ma~P0~jey$^ZZW0RR630HWds6!;)bSO5S307*qoM6N<$g5>rd6951J

literal 0
HcmV?d00001

diff --git a/src/js/jquery.chocolat.js b/src/js/jquery.chocolat.js
index 02d4dcd..8d32b91 100644
--- a/src/js/jquery.chocolat.js
+++ b/src/js/jquery.chocolat.js
@@ -306,13 +306,13 @@
         },
 
         getOutMarginW : function() {
-            var left  = this.elems.left.outerWidth();
-            var right = this.elems.right.outerWidth();
+            var left  = this.elems.left.outerWidth(true);
+            var right = this.elems.right.outerWidth(true);
             return left + right;
         },
 
         getOutMarginH : function() {
-            return this.elems.top.outerHeight() + this.elems.bottom.outerHeight();
+            return this.elems.top.outerHeight(true) + this.elems.bottom.outerHeight(true);
         },
 
         markup : function() {