jQuery UI слайдер виджет + fancybox + масштабирование/масштабирование

Question

Я использую слайдер jquery UI (http://jqueryui.com/slider/).

Мне нужно сделать масштабирование/масштабирование на весь сайт. Для масштабирования в IE + Chrome с использованием CSS-стиля - «зум».

Все работает отлично в увеличенном состоянии, проблема в слайдере, скользящее просто не запускается, нажимая на него (когда его родитель увеличен).

Вот пример того, что я имею в виду - http://jsfiddle.net/8hbMx/

<style> 
    .slider{ 
     width: 363px;; 
     height: 15px; 
     margin-left: 40px; 
    } 
    #test{ 
     zoom: 50%; 
} 
</style> 
<div id="test"> 
    <div class="slider"></div> 
</div> 
<script> 
    $('.slider').slider({ 
     min: 1, 
     max: 10, 
     width: 50, 
     value: 1 
    }); 
</script> 

Вот как я огнь масштабирования:

   $(window).resize(debouncer(function(e) { 
        scale_elements(); 
       })); 

scale_elements() - масштаб оболочка моей страницы.

Пожалуйста, помогите, спасибо.

Answer 1

Только в случае, если кто-то столкнется с этой проблемой тоже, вот как я ее решил.

Я не мог заставить его работать с масштабированием, поэтому я просто отключил отслеживание щелчков слайдера и нажимал его, чтобы использовать только перетаскивание (при правильном его перетаскивании).

Выключите увлекая немного сложно, что, как я это сделал:

   if (scale < 100) { // detect zooming 
        $('.slider').css('height', '0px'); //setting height of slider to 0, so user can't click on it 
       } 

Answer 2

Попробуйте это, используя атрибуты slide и change в slider конструктору:

HTML

<div id="zoom-box"> 
    <div id="slider"></div> 
</div> 
<div id="debug"></div> <!-- Remove for production --> 

CSS

#slider { 
    width: 363px; 
    height: 15px; 
    margin-left: 40px; 
} 

JavaScript

$('#slider').slider({ 
    min: 1, 
    max: 100, 
    width: 50, 
    value: 100, 
    slide: updateZoom, 
    change: updateZoom 
}); 

function updateZoom() { 
    var scale = $('#slider').slider('value'); 
    $('#zoom-box').css('zoom', (scale) + '%'); 
    $('#debug').prepend(scale + '<br/>'); // Remove for production 
}