Fixes #1

Author: libhide

demo/css/simplebox.css

@@ -4,15 +4,15 @@
     $.fn.simplebox = function(options) {
         var settings = $.extend({
             fadeSpeed: 400,
-            imgPath: "img/",
+            imgPath: "img",
             closeImg: "cross.svg",
             closeCrossAnimation: true,
         }, options);
 
         // Helper Variables
         var $body = $("body");
         var $overlay = $('<div id="overlay"></div>');
-        var $cross = $('<img class="cross" src="' + settings.imgPath + settings.closeImg + '">');
+        var $cross = $('<img class="cross" src="' + settings.imgPath + "/" +settings.closeImg + '">');
         var $image = $("<img class='slb'>");
         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,14 +44,14 @@
 
             // When the image is clicked
             $this.click(function() {
-                console.log("Click");
                 var $this = $(this);
                 var imageSRC = $this.attr("src");
                 $image.attr("src", imageSRC);
                 $image.css("max-height", "80%");
                 $image.addClass('pop-in');
                 $image.removeClass('pop-out');
                 $image.addClass('center');
+                $image.addClass('slb-opened');
 
                 $overlay.css('pointer-events', 'initial');
 

demo/js/simplebox.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'));
 });
 

dist/css/simplebox.css

@@ -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 {

dist/css/simplebox.min.css

@@ -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,14 +44,14 @@
 
             // When the image is clicked
             $this.click(function() {
-                console.log("Click");
                 var $this = $(this);
                 var imageSRC = $this.attr("src");
                 $image.attr("src", imageSRC);
                 $image.css("max-height", "80%");
                 $image.addClass('pop-in');
                 $image.removeClass('pop-out');
                 $image.addClass('center');
+                $image.addClass('slb-opened');
 
                 $overlay.css('pointer-events', 'initial');