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');