diff --git a/demo/css/simplebox.css b/demo/css/simplebox.css index f6f10a3..3a6d787 100644 --- a/demo/css/simplebox.css +++ b/demo/css/simplebox.css @@ -1,6 +1,10 @@ .slb { box-shadow: 2px 2px 12px 1px rgba(0, 0, 0, 0.2); - cursor: pointer; } + cursor: -webkit-zoom-in; + cursor: zoom-in; } + +.slb-opened { + cursor: auto; } .pop-in { -webkit-animation: pop-in 250ms; diff --git a/demo/js/simplebox.js b/demo/js/simplebox.js index ca588f2..7ff79ae 100644 --- a/demo/js/simplebox.js +++ b/demo/js/simplebox.js @@ -4,7 +4,7 @@ $.fn.simplebox = function(options) { var settings = $.extend({ fadeSpeed: 400, - imgPath: "img/", + imgPath: "img", closeImg: "cross.svg", closeCrossAnimation: true, }, options); @@ -12,7 +12,7 @@ // Helper Variables var $body = $("body"); var $overlay = $('
'); - var $cross = $(''); + var $cross = $(''); var $image = $(""); var fadeSpeed = settings.fadeSpeed; @@ -25,8 +25,7 @@ } else { $('.cross').hide(settings.fadeSpeed); } - // $image.addClass('pop-out'); - // $image.removeClass('pop-in'); + $image.removeClass('slb-opened'); }); $cross.click(function() { @@ -36,8 +35,7 @@ } else { $('.cross').hide(settings.fadeSpeed); } - // $image.addClass('pop-out'); - // $image.removeClass('pop-in'); + $image.removeClass('slb-opened'); }); return this.each(function() { @@ -46,7 +44,6 @@ // When the image is clicked $this.click(function() { - console.log("Click"); var $this = $(this); var imageSRC = $this.attr("src"); $image.attr("src", imageSRC); @@ -54,6 +51,7 @@ $image.addClass('pop-in'); $image.removeClass('pop-out'); $image.addClass('center'); + $image.addClass('slb-opened'); $overlay.css('pointer-events', 'initial'); diff --git a/dist/css/simplebox.css b/dist/css/simplebox.css index f6f10a3..3a6d787 100644 --- a/dist/css/simplebox.css +++ b/dist/css/simplebox.css @@ -1,6 +1,10 @@ .slb { box-shadow: 2px 2px 12px 1px rgba(0, 0, 0, 0.2); - cursor: pointer; } + cursor: -webkit-zoom-in; + cursor: zoom-in; } + +.slb-opened { + cursor: auto; } .pop-in { -webkit-animation: pop-in 250ms; diff --git a/dist/css/simplebox.min.css b/dist/css/simplebox.min.css index e6f2cb4..babd167 100644 --- a/dist/css/simplebox.min.css +++ b/dist/css/simplebox.min.css @@ -1 +1 @@ -.slb{box-shadow:2px 2px 12px 1px rgba(0,0,0,.2);cursor:pointer}.pop-in{-webkit-animation:pop-in 250ms;-moz-animation:pop-in 250ms;-ms-animation:pop-in 250ms}.pop-out{-webkit-animation:pop-out 250ms;-moz-animation:pop-out 250ms;-ms-animation:pop-out 250ms}.center{max-height:90%;max-width:90%;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}#overlay,.cross{display:none;position:fixed;right:0;top:0;cursor:pointer}#overlay{background:#fff;width:100vw;height:100vh;left:0;bottom:0;pointer-events:none}.cross{width:40px;margin:20px 25px 0 0;transition:.3s all ease-in-out;z-index:99;opacity:1}.cross-close{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}@-webkit-keyframes pop-in{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes pop-in{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes pop-out{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}}@keyframes pop-out{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}} \ No newline at end of file +.slb{box-shadow:2px 2px 12px 1px rgba(0,0,0,.2);cursor:-webkit-zoom-in;cursor:zoom-in}.slb-opened{cursor:auto}.pop-in{-webkit-animation:pop-in 250ms;-moz-animation:pop-in 250ms;-ms-animation:pop-in 250ms}.pop-out{-webkit-animation:pop-out 250ms;-moz-animation:pop-out 250ms;-ms-animation:pop-out 250ms}.center{max-height:90%;max-width:90%;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}#overlay,.cross{display:none;position:fixed;right:0;top:0;cursor:pointer}#overlay{background:#fff;width:100vw;height:100vh;left:0;bottom:0;pointer-events:none}.cross{width:40px;margin:20px 25px 0 0;transition:.3s all ease-in-out;z-index:99;opacity:1}.cross-close{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}@-webkit-keyframes pop-in{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes pop-in{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes pop-out{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}}@keyframes pop-out{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}} \ No newline at end of file diff --git a/dist/js/simplebox.min.js b/dist/js/simplebox.min.js index ed158a0..426fa54 100644 --- a/dist/js/simplebox.min.js +++ b/dist/js/simplebox.min.js @@ -1 +1 @@ -"use strict";!function(s){s.fn.simplebox=function(e){var o=s.extend({fadeSpeed:400,imgPath:"img/",closeImg:"cross.svg",closeCrossAnimation:!0},e),c=s("body"),i=s('
'),a=s(''),n=s(""),r=o.fadeSpeed;return i.click(function(){i.fadeOut(r),o.closeCrossAnimation?s(".cross").addClass("cross-close"):s(".cross").hide(o.fadeSpeed)}),a.click(function(){i.fadeOut(r),o.closeCrossAnimation?s(".cross").addClass("cross-close"):s(".cross").hide(o.fadeSpeed)}),this.each(function(){s("body").append(a);var e=s(this);e.click(function(){console.log("Click");var e=s(this),t=e.attr("src");n.attr("src",t),n.css("max-height","80%"),n.addClass("pop-in"),n.removeClass("pop-out"),n.addClass("center"),i.css("pointer-events","initial"),o.closeCrossAnimation&&s(".cross").removeClass("cross-close"),i.append(n),c.append(i),i.fadeIn(r),a.show()})})}}(jQuery); \ No newline at end of file +"use strict";!function(s){s.fn.simplebox=function(e){var o=s.extend({fadeSpeed:400,imgPath:"img",closeImg:"cross.svg",closeCrossAnimation:!0},e),a=s("body"),c=s('
'),i=s(''),d=s(""),n=o.fadeSpeed;return c.click(function(){c.fadeOut(n),o.closeCrossAnimation?s(".cross").addClass("cross-close"):s(".cross").hide(o.fadeSpeed),d.removeClass("slb-opened")}),i.click(function(){c.fadeOut(n),o.closeCrossAnimation?s(".cross").addClass("cross-close"):s(".cross").hide(o.fadeSpeed),d.removeClass("slb-opened")}),this.each(function(){s("body").append(i);var e=s(this);e.click(function(){var e=s(this),r=e.attr("src");d.attr("src",r),d.css("max-height","80%"),d.addClass("pop-in"),d.removeClass("pop-out"),d.addClass("center"),d.addClass("slb-opened"),c.css("pointer-events","initial"),o.closeCrossAnimation&&s(".cross").removeClass("cross-close"),c.append(d),a.append(c),c.fadeIn(n),i.show()})})}}(jQuery); \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 57aa135..0410f76 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -29,7 +29,6 @@ gulp.task('compileSass', function() { gulp.task('outputImages', function() { return gulp.src("src/img/cross.svg") - .pipe(gulp.dest('./demo/img')) .pipe(gulp.dest('./dist/img')); }); diff --git a/src/css/simplebox.scss b/src/css/simplebox.scss index b589147..3e1d7d9 100644 --- a/src/css/simplebox.scss +++ b/src/css/simplebox.scss @@ -1,6 +1,11 @@ .slb { box-shadow: 2px 2px 12px 1px rgba(0, 0, 0, 0.2); - cursor: pointer; + cursor: -webkit-zoom-in; + cursor: zoom-in; +} + +.slb-opened { + cursor: auto; } .pop-in { diff --git a/src/js/simplebox.js b/src/js/simplebox.js index b6dfa1c..7ff79ae 100644 --- a/src/js/simplebox.js +++ b/src/js/simplebox.js @@ -25,8 +25,7 @@ } else { $('.cross').hide(settings.fadeSpeed); } - // $image.addClass('pop-out'); - // $image.removeClass('pop-in'); + $image.removeClass('slb-opened'); }); $cross.click(function() { @@ -36,8 +35,7 @@ } else { $('.cross').hide(settings.fadeSpeed); } - // $image.addClass('pop-out'); - // $image.removeClass('pop-in'); + $image.removeClass('slb-opened'); }); return this.each(function() { @@ -46,7 +44,6 @@ // When the image is clicked $this.click(function() { - console.log("Click"); var $this = $(this); var imageSRC = $this.attr("src"); $image.attr("src", imageSRC); @@ -54,6 +51,7 @@ $image.addClass('pop-in'); $image.removeClass('pop-out'); $image.addClass('center'); + $image.addClass('slb-opened'); $overlay.css('pointer-events', 'initial');