I'm trying proportionally scale image using slider. I have glasses image (in css: width: 150px height: auto) I need that in that image size, ui slide handle to be in the middle (range 75px - 300px). Here what I got:
<script>
jQuery("#slider").slider({
step: 1,
max: 300,
slide: function(e,ui){
var sliderValue = jQuery("#slider").slider("value");
jQuery(".over_image").width(sliderValue * 1.5);
jQuery(".over_image").height(sliderValue );
}
})
</script>
<div class="wraper">
<div id="output" class="foto-frame">
<img class="over_image" src="1.png" alt="img3" />
</div>
<div id="progressbox"><div id="progressbar"></div ></div>
<div class="nav-buttons">
<div id="slider"></div>
</div>
</div>
Im getting square image, any advices how to save aspect ratio?
two suggestions:
do not change height.
start from 75
var over_image = jQuery(".over_image");
jQuery("#slider").slider({
step: 1,
max: 300 - 75,
slide: function(e, ui) {
var sliderValue = jQuery("#slider").slider("value");
over_image.width(sliderValue + 75);
}
});