Функция увеличения почти завершена

Question

Мой сотрудник почти закончил эту функцию масштабирования, но я не могу понять, как ее завершить. Here is a jsFiddle. Красные точки должны находиться в том же месте относительно изображения, когда вы перемещаете ползунок справа. Все отлично, за исключением кода в $ ('. Marker'). Each (function() {...}); Я пробовал много комбинаций, но не могу получить правильную логику для увеличения. Благодаря!

Вот JS:

$("#sliderVertical").slider({ 
    orientation: "vertical", 
    range: "min", 
    min: 0, 
    max: 100, 
    value: 50, 
    slide: function(event, ui) { 
     $("#sliderValue").text(ui.value); 
     var backImg = $('img'); 
     if (ui.value == 0) { 
      ui.value = 0.1; 
     }   
     var width = ui.value * 12; 
     var height = width * .75; 

     $('.marker').each(function(){ 
      var marginLeft = parseFloat($(this).css('margin-left')), 
      totalWidth = parseFloat(backImg.css('width')); 
      var newMarginLeft = null; 

      var marginTop = parseFloat($(this).css('margin-top')), 
      totalHeight = parseFloat(backImg.css('height')); 
      var newMrginTop = null; 

      console.log(totalHeight); 

      //$(this).css({'margin-left': newMarginLeft + 'px', 'margin-top': newMrginTop + 'px'}); 
     }); 

     var marLeft = 0 - (width/2); 
     var marTop = 0 - (height/2); 

     backImg.css({'width': width + 'px', 'height': height + 'px', 'margin-left': marLeft + 'px', 'margin-top': marTop + 'px'}); 

    } 
}); 

Answer 1

$('.marker').each(function(){ 
      var marginLeft = parseFloat($(this).css('margin-left')), 
      totalWidth = parseFloat(backImg.css('width')); 
      var newMarginLeft = marginLeft*width/totalWidth; 

      var marginTop = parseFloat($(this).css('margin-top')), 
      totalHeight = parseFloat(backImg.css('height')); 
      var newMrginTop = marginTop*height/totalHeight; 

      console.log(totalHeight); 

      $(this).css({'margin-left': newMarginLeft + 'px', 'margin-top': newMrginTop + 'px'}); 
     }); 

DEMO