CODEWITHSUNDEEP
jqueryjquery-uijquery-slider
dojo
dojo

Reputation: 453

Proportionaly scale image with jQuery-ui slider

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?

Upvotes: 0

Views: 1316

Answers (1)

zb&#39;
zb&#39;

Reputation: 8059

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);
    }
});​

Upvotes: 2

Related Questions