From 2afe081e9355025f9835dca12675d6d63aa05f54 Mon Sep 17 00:00:00 2001 From: "Emanuele \"ToX\" Toscano" Date: Thu, 3 Nov 2016 10:44:00 +0100 Subject: [PATCH] Add zoomable option --- examples/index.html | 10 ++++++++-- src/css/lightbox.css | 27 ++++++++++++++++++++++++++- src/images/zoom.png | Bin 0 -> 1325 bytes src/js/lightbox.js | 13 ++++++++++++- 4 files changed, 46 insertions(+), 4 deletions(-) create mode 100644 src/images/zoom.png diff --git a/examples/index.html b/examples/index.html index 1312c7f4..e8997a54 100644 --- a/examples/index.html +++ b/examples/index.html @@ -3,7 +3,7 @@ Lightbox Example - + @@ -31,7 +31,13 @@

A Four Image Set

- + + + diff --git a/src/css/lightbox.css b/src/css/lightbox.css index 80958352..5bdebabb 100644 --- a/src/css/lightbox.css +++ b/src/css/lightbox.css @@ -1,6 +1,6 @@ /* Preload images */ body:after { - content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png); + content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png) url(../images/zoom.png); display: none; } @@ -211,3 +211,28 @@ body.lb-disable-scrolling { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } + +.lb-zoom { + display: none; + position: absolute; + right: 10px; + top: 10px; + width: 30px; + height: 30px; + background: url(../images/zoom.png) top right no-repeat; + text-align: right; + outline: none; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); + opacity: 0.8; + -webkit-transition: opacity 0.2s; + -moz-transition: opacity 0.2s; + -o-transition: opacity 0.2s; + transition: opacity 0.2s; + z-index: 10001; +} + +.lb-zoom:hover { + cursor: pointer; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + opacity: 1; +} diff --git a/src/images/zoom.png b/src/images/zoom.png new file mode 100644 index 0000000000000000000000000000000000000000..b8b2162be8ef1d2a0322c58aa3b1bb3d0c218a4c GIT binary patch literal 1325 zcmV+|1=9M7P)C=!D`NLnvmmQ8c1H4R#pdK&hm zA<@!9Kw1b}@Dg%KAjx1cP#QKNXb?Osct~&$GHHsmTX4+b92O^~8h)8@f2 z@cZ$5-+b?V@0*{1-G#8l8exwi?65Bar~**KZxKL+pAvu#2BrT3CIWB)@Bjz^Xc!wC zJ0XfmUg0AvBI0k8oS`2+SG)c|~3=7Qmsw!NH5UTrNjMG&?(c7r?tamD2^_s3V3{DwSkLwOp3K{QUeB z5m7RkQ~@01gf0Lri9}+WtMRg{tLqd1X*)&&A8a^s^hxcE-dR26}T>JX_`%m&*3fuL|J2o~p?5K{#;Flz+Wqy8s>fXJ3 zHy0NdQ$$2dOH040s(S0uqenl5!{K%YZL=)PESJlb8#iuz$3hXdk~#p0f*{lY01;Jq zNUIWw#HG&8&aYql6A@%tZkA=a830@^SMkoBJL3R~L{t$)QSf@bzU>t0fRWqn7671J zE?0QHeEat8`);@UXeN`9nwpwElx4YD)3iS{O?&3?c(OAyGc#;i)q)@hL0ryM1=wzl@Myge+2W2&m&A|iV5;K8o|P5^j^_kBY{Ly`6M^?adFC|Rgh)Si>#>B*g0^ktK+Z_&v+n+pn@}r_CpE4sCfCI8De`Z;hO+>V?uy7y1 z;hpA808rb}(b2xLvZ4_Y*|u#D4h~)f(84VJ?0?;6m0Av6k4Gj%Nrl+TGI*f>jR##W`XfzsS2dUYu>j!&! zdd{WO=@(9-d_G^WEXy=aGizCvvA({ZFPF;|htcZls!l{?nx;82GV&!4ef4eu8-l^$ z@!8qgyM|%B%;)n3CwZk(p+cchG)+_I9-WOwqfyf|O~=3^kw};UYj*pmt_9%h>gsCh z@9#eu2m}s$yzHX;oE|j~_q&o&VJCk&%(!t5>i7P+wo~vnoNPy?aF=>GrG)5wkuxXkGm(&;-7&y;os`h#@+Uogd`5Q+^M=v>m zmSySP-QB18!vy@#Q3IfHU|`_9Wm!5AQ7jhw96;UM0CNC?-QC@%8R(!Rl(&Mm>8>fT j').appendTo($('body')); + $('
').appendTo($('body')); // Cache jQuery objects this.$lightbox = $('#lightbox'); @@ -156,6 +157,11 @@ return false; }); + this.$lightbox.find('.lb-zoom').on('click', function() { + window.open(self.$image[0].src, '_blank'); + return false; + }); + /* Show context menu for image on right-click @@ -252,6 +258,11 @@ $('body').addClass('lb-disable-scrolling'); } + // Show zoom lens when needed + if (this.options.zoomable) { + $('.lb-zoom').show(); + } + this.changeImage(imageNumber); };