issue #43 diff slider

inc/media.php

@@ -1197,10 +1197,10 @@ function media_image_diff($image, $l_rev, $r_rev, $meta, $type) {
 
     // two image's in div's
     echo '<div id="mediamanager__diff_layout">';
-    echo '<div id="mediamanager__diff_'.$type.'_image1" style="max-width: '.$l_size[0].'px;">'; //  height: '.$l_size[1].'px;
+    echo '<div id="mediamanager__diff_'.$type.'_image1" style="max-width: '.$l_size[0].'px;">';
     echo '<img src="'.$l_src.'" />';
     echo '</div>';
-    echo '<div id="mediamanager__diff_'.$type.'_image2" style="max-width: '.$l_size[0].'px;">'; // height: '.$l_size[1].'px;
+    echo '<div id="mediamanager__diff_'.$type.'_image2" style="max-width: '.$l_size[0].'px;">';
     echo '<img src="'.$r_src.'" />';
     echo '</div>';
     echo '</div>';

lib/scripts/media.js

@@ -560,8 +560,8 @@ var dw_mediamanager = {
             params,
             function (data) {
                 $content.html(data);
-                dw_mediamanager.opacity_slider();
                 dw_mediamanager.portions_slider();
+                dw_mediamanager.opacity_slider();
             },
             'html'
         );
@@ -574,6 +574,7 @@ var dw_mediamanager = {
      */
     opacity_slider: function () {
         var $slider = jQuery( "#mediamanager__opacity_slider" );
+        if (!$slider.length) return;
         $slider.slider();
         $slider.slider("option", "min", 0);
         $slider.slider("option", "max", 0.999);
@@ -590,39 +591,31 @@ var dw_mediamanager = {
      * @author Kate Arzamastseva <pshns@ukr.net>
      */
     portions_slider: function () {
+        var $image1 = jQuery('#mediamanager__diff_portions_image1 img');
         var $image2 = jQuery('#mediamanager__diff_portions_image2 img');
-        if ($image2) {
-            $image2 = jQuery($image2[0]);
+        if (!$image1.length || !$image2.length) return;
 
-            $image2.parent().css({
-                width: '100%'
-            });
+        var $div = jQuery("#mediamanager__diff_layout");
+        if (!$div.length) return;
 
-            $image2.css({
-                width: '100%',
-                height: 'auto'
-            });
+        if ($image1.width() < $div.width()) {
+            $div.width($image1.width());
+        }
 
-            $image2.css({
-                width: $image2.width() + 'px',
-                height: $image2.height() + 'px'
-            });
+        $image2.parent().width('50%');
+        $image2.width($image1.width());
 
-            var $div = jQuery("#mediamanager__diff_layout");
-            if ($image2.width() < $div.width()) {
-                $div.width($image2.width());
-            }
+        var $slider = jQuery("#mediamanager__portions_slider");
+        if (!$slider.length) return;
+        $slider.slider();
+        $slider.slider("option", "min", 0);
+        $slider.slider("option", "max", 100);
+        $slider.slider("option", "step", 1);
+        $slider.slider("option", "value", 50);
+        $slider.bind("slide", function(event, ui) {
+            jQuery('#mediamanager__diff_portions_image2').css({ width: $slider.slider("option", "value")+'%'});
+        });
 
-            var $slider = jQuery("#mediamanager__portions_slider");
-            $slider.slider();
-            $slider.slider("option", "min", 0);
-            $slider.slider("option", "max", 100);
-            $slider.slider("option", "step", 1);
-            $slider.slider("option", "value", 50);
-            $slider.bind("slide", function(event, ui) {
-                jQuery('#mediamanager__diff_portions_image2').css({ width: $slider.slider("option", "value")+'%'});
-            });
-        }
     },
 
     prepare_content: function ($content) {

lib/tpl/default/mediamanager.css

@@ -363,21 +363,23 @@ form.meta textarea.edit {
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
 }
 
-#mediamanager__diff_layout div img {
+#mediamanager__diff_layout div img,
+#mediamanager__diff_opacity_image1,
+#mediamanager__diff_portions_image1 {
     width: 100%;
 }
 
 #mediamanager__diff_opacity_image2 {
+    width: 100%;
     -moz-opacity: 0.5;
     -khtml-opacity: 0.5;
     opacity: 0.5;
 }
 
 #mediamanager__diff_portions_image2 {
-    width: 50%;
+    width: 100%;
     border-right: 1px solid red;
     overflow: hidden;
 }