Search code examples
jquerycssimagecoordinatesscale

Manipulating image size with css failed to keep the original y position..!

I'm using jQuery to create interactive graphic.. I have a jslider and I want to change size of images when value of the slider changes. It is actually working like this:

 <script>
        jQuery("#SliderSingle2").slider({ from: 2002, to: 2012, step: 1, round: 0,     skin: "round", limits: false, format: { format: '##', locale: 'de' }, scale: ['2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012'],callback: function( value ){
                var SliderValue = $('#SliderSingle2').attr('value');
                if(value== "2003"){
                    $("#img").css("transform","scale(0.9)");
                                            $("#img2").css("transform","scale(1.0)");
                    $("#img3").css("transform","scale(0.7)");
                }else if(value=="2004"){
                        $("#img1").css("transform","scale(1.0)");
                        $("#img2").css("transform","scale(1.0)");
                                            $("#img3").css("transform","scale(0.7)");
}}};
</script>

.. Images do grow when I change the value of the slider.. The problem is that I want those images to keep their position in the Y-axis, those can not grow downwards, images should be on same level/height on the page all the time.. because those pictures cover the slider otherwise. I don't have a clue how to do so..?Anyone vicer..?

-EDIT- Those values how much to grow are going to be proportional with the data of that year.. I'm trying to draw that data so it would make more effect, when you "can see the growth/data change"..

Solution

  • Just give the images vertical-align: bottom.

    img {
   vertical-align: bottom;
}

    Then they should stay in line.

    EDIT:

    I think this is what you want:

    http://jsfiddle.net/gLRck/

    Instead of using transform scale we just set the height. I also made the images resize on dragging the handles instead of when releasing mousebutton.

    EDIT EDIT: And now it also works in chrome ;)