adding responsive image support

pweigand · Feb 2, 2016 · ba0d480 · ba0d480
1 parent 7094cac
commit ba0d480
Show file tree

Hide file tree

Showing 10 changed files with 129 additions and 62 deletions.
diff --git a/build/css/freezeframe_styles.css b/build/css/freezeframe_styles.css
diff --git a/build/css/freezeframe_styles.min.css b/build/css/freezeframe_styles.min.css
diff --git a/build/js/freezeframe.js b/build/js/freezeframe.js
@@ -91,13 +91,18 @@ var freezeframe = (function($) {
   // dont run if no images found
   freezeframe.prototype.setup = function() {
     var ff = this,
-      setup_required = this.images.not('.freezeframe-setup');
+      setup_required = this.images.not('.freezeframe-setup'),
+      container_classnames = ['freezeframe-container'];
 
     setup_required.each(function(e) {
       var $image = $(this);
 
       $image.addClass('freezeframe-setup freezeframe-image');
 
+      if($image.hasClass('freezeframe-responsive')) {
+        container_classnames.push('freezeframe-responsive');
+      }
+
       $canvas = $('<canvas />', {
         class: 'freezeframe-canvas'
       }).attr({
@@ -107,7 +112,7 @@ var freezeframe = (function($) {
 
       $image.add($canvas).wrapAll(
         $('<div />', {
-          class: 'freezeframe-container'
+          class: container_classnames.join(' ')
         })
       );
 
@@ -136,13 +141,15 @@ var freezeframe = (function($) {
     $canvas.attr({
       'width': image_width,
       'height': image_height
-    }).css({
-      'margin-right': '-' + image_width + 'px'
-    })
+    });
+    // }).css({
+    //   'margin-right': '-' + image_width + 'px'
+    // })
 
     context = $canvas[0].getContext('2d');
-    context.mozImageSmoothingEnabled = false;
-    context.imageSmoothingEnabled = false;
+    context.mozImageSmoothingEnabled = true;
+    context.webkitImageSmoothingEnabled = true;
+    context.imageSmoothingEnabled = true;
     context.drawImage($_image[0], 0, 0, image_width, image_height);
 
     $canvas.addClass('freezeframe-canvas-ready').on(transitionEnd, function() {
@@ -192,14 +199,14 @@ var freezeframe = (function($) {
       // hover
       if((!ff.is_touch_device && ff.options.non_touch_device_trigger_event == 'hover') || (ff.is_touch_device)) {
 
-        $canvas.mouseenter(function() {
+        $image.mouseenter(function() {
           (function() {
             $image.attr('src', $image[0].src);
             $canvas.removeClass('freezeframe-canvas-ready').addClass('freezeframe-canvas-active');
           })();
         })
 
-        $canvas.mouseleave(function() {
+        $image.mouseleave(function() {
           (function() {
             $canvas.removeClass('freezeframe-canvas-active').addClass('freezeframe-canvas-ready');
           })();
@@ -209,7 +216,7 @@ var freezeframe = (function($) {
       // click
       if((!ff.is_touch_device && ff.options.non_touch_device_trigger_event == 'click') || (ff.is_touch_device)) {
 
-        $canvas.click(function() {
+        $image.click(function() {
 
           (function() {