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 00000000..b8b2162b Binary files /dev/null and b/src/images/zoom.png differ diff --git a/src/js/lightbox.js b/src/js/lightbox.js index 1cc62d94..3fca8ef7 100644 --- a/src/js/lightbox.js +++ b/src/js/lightbox.js @@ -51,6 +51,7 @@ showImageNumberLabel: true, wrapAround: false, disableScrolling: false, + zoomable: false, /* Sanitize Title If the caption data is trusted, for example you are hardcoding it in, then leave this to false. @@ -93,7 +94,7 @@ // Attach event handlers to the new DOM elements. click click click Lightbox.prototype.build = function() { var self = this; - $('
').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); };