issue #43 images align

1 files changed, 20 insertions, 6 deletions

diff --git a/lib/scripts/media.js b/lib/scripts/media.js
index 6c5c2611e..26eb43fc3 100644
--- a/lib/scripts/media.js
+++ b/lib/scripts/media.js
@@ -439,11 +439,6 @@ var dw_mediamanager = {
         }
 
         dw_mediamanager.layout_width = jQuery('#mediamanager__layout').width();
-
-        // rebuild sliders if exists
-        dw_mediamanager.opacity_slider();
-        dw_mediamanager.portions_slider();
-
         $r = jQuery("#mediamanager__layout .layout-resizable, #mediamanager__layout .layout");
 
         var w = 0, wSum = 0, mCount = 0, mArray = [];
@@ -476,6 +471,9 @@ var dw_mediamanager = {
             w += "%";
             jQuery(this).width(w);
         });
+
+        dw_mediamanager.opacity_slider();
+        dw_mediamanager.portions_slider();
     },
 
     /**
@@ -512,6 +510,9 @@ var dw_mediamanager = {
                     w += "%";
                     jQuery(this).width(w);
                 });
+
+                dw_mediamanager.opacity_slider();
+                dw_mediamanager.portions_slider();
             }
         });
 
@@ -579,6 +580,11 @@ var dw_mediamanager = {
     opacity_slider: function () {
         var $slider = jQuery( "#mediamanager__opacity_slider" );
         if (!$slider.length) return;
+
+        var $image = jQuery('#mediamanager__diff_opacity_image1 img');
+        if (!$image.length) return;
+        $slider.width($image.width()-20);
+
         $slider.slider();
         $slider.slider("option", "min", 0);
         $slider.slider("option", "max", 0.999);
@@ -602,18 +608,26 @@ var dw_mediamanager = {
         var $div = jQuery("#mediamanager__diff_layout");
         if (!$div.length) return;
 
+        $div.width('100%');
+        $image2.parent().width('97%');
+        $image1.width('100%');
+        $image2.width('100%');
+
         if ($image1.width() < $div.width()) {
             $div.width($image1.width());
         }
 
         $image2.parent().width('50%');
         $image2.width($image1.width());
+        $image1.width($image1.width());
 
         var $slider = jQuery("#mediamanager__portions_slider");
         if (!$slider.length) return;
+        $slider.width($image1.width()-20);
+
         $slider.slider();
         $slider.slider("option", "min", 0);
-        $slider.slider("option", "max", 100);
+        $slider.slider("option", "max", 97);
         $slider.slider("option", "step", 1);
         $slider.slider("option", "value", 50);
         $slider.bind("slide", function(event, ui) {