diff options
| -rw-r--r-- | inc/media.php | 13 | ||||
| -rw-r--r-- | lib/scripts/media.js | 46 | ||||
| -rw-r--r-- | lib/tpl/default/mediamanager.css | 20 |
3 files changed, 58 insertions, 21 deletions
diff --git a/inc/media.php b/inc/media.php index bb3fc22dc..99567632c 100644 --- a/inc/media.php +++ b/inc/media.php @@ -1161,12 +1161,19 @@ function media_image_diff($image, $l_rev, $r_rev, $meta, $type) { $l_src = ml($image, $l_more); $r_src = ml($image, $r_more); - echo '<div id="mediamanager__diff_'.$type.'_image1" style="background-image: url(\''.$l_src.'\'); max-width: '.$l_size[0].'px; height: '.$l_size[1].'px; " >'; - echo '<div id="mediamanager__diff_'.$type.'_image2" style="background-image: url(\''.$r_src.'\'); max-width: '.$l_size[0].'px; height: '.$l_size[1].'px; " >'; + // slider + echo '<div id="mediamanager__'.$type.'_slider" style="max-width: '.($l_size[0]-20).'px;" ></div>'; + + // 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 '<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 '<img src="'.$r_src.'" />'; echo '</div>'; echo '</div>'; - echo '<div id="mediamanager__'.$type.'_slider" style="max-width: '.($l_size[0]-20).'px;" ></div>'; echo '</div>'; } diff --git a/lib/scripts/media.js b/lib/scripts/media.js index 17006e289..e8c492f5f 100644 --- a/lib/scripts/media.js +++ b/lib/scripts/media.js @@ -436,6 +436,10 @@ 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 = []; @@ -586,15 +590,39 @@ var dw_mediamanager = { * @author Kate Arzamastseva <pshns@ukr.net> */ portions_slider: function () { - 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")+'%'}); - }); + var $image2 = jQuery('#mediamanager__diff_portions_image2 img'); + if ($image2) { + $image2 = jQuery($image2[0]); + + $image2.parent().css({ + width: '100%' + }); + + $image2.css({ + width: '100%', + height: 'auto' + }); + + $image2.css({ + width: $image2.width() + 'px', + height: $image2.height() + 'px' + }); + + var $div = jQuery("#mediamanager__diff_layout"); + if ($image2.width() < $div.width()) { + $div.width($image2.width()); + } + + 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) { diff --git a/lib/tpl/default/mediamanager.css b/lib/tpl/default/mediamanager.css index 353230cc6..a2fd35a47 100644 --- a/lib/tpl/default/mediamanager.css +++ b/lib/tpl/default/mediamanager.css @@ -355,18 +355,22 @@ form.meta textarea.edit { margin-bottom: 10px; } -#mediamanager__diff_opacity_image1, -#mediamanager__diff_portions_image1 { - width: 99%; +#mediamanager__diff_layout { position: relative; - margin-top: 10px; } -#mediamanager__diff_opacity_image2 { - width: 100%; +#mediamanager__diff_layout div { position: absolute; top: 0; left: 0; + width: 100%; +} + +#mediamanager__diff_layout div img { + width: 100%; +} + +#mediamanager__diff_opacity_image2 { -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; @@ -374,10 +378,8 @@ form.meta textarea.edit { #mediamanager__diff_portions_image2 { width: 50%; - position: absolute; - top: 0; - left: 0; border-right: 1px solid red; + overflow: hidden; } #mediamanager__opacity_slider, |