0

I'm trying to produce a photo slider that is dynamically sized according to the viewport size, but maintains a 4:3 ratio regardless of viewport dimensions.

The page I'm working on is here: http://steph-morris.com/thenovel_III.html

Width is currently being calculated by grabbing the viewport width and subtracting the size of the menu bars, like so:

$(document).ready(function(){
  var height = $(window).height(), width = $(window).width();
  $('img').css('width', (width - (281+(height*0.32))) + 'px');
  });

(Where one menu is a known width of 281px and the other menu is calculated as height*0.32).

I need to calculate height in relation to width in a 4:3 ratio.

I am brand new to jQuery maths and haven't been able to get a working nested equation that does something like

$('img').css('height', ((width - (281+(height*0.32))*thecorrectratio) + 'px');

Also, this is not an efficient approach- I should be storing the outcome of the 'width' calculation I think and calculating it more as

$('img').css('height', (widthvalue*thecorrectratio) + 'px');

But I also don't know how to do that with jQuery.

So I would really appreciate any assistance with (a) how to write a good nested equation to work out the value of 'height', or (b) how to save the outcome of the 'width' equation so that it can be used again, and obviously (c) the correct way to calculate a 4:3 ratio.

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
Ila
  • 3,528
  • 8
  • 48
  • 76
  • This is really a javascript question, or even just a math question. JQuery doesn't have math. – James Montagne Sep 18 '11 at 18:46
  • I once answered a question that seems to be very similar: http://stackoverflow.com/questions/6565703/math-algorithm-fit-image-to-screen-retain-aspect-ratio/ – davin Sep 18 '11 at 19:55

1 Answers1

1

you can write an equation with a function :

$(document).ready(function(){
    function height43(width){
        return Math.floor(parseInt(width)/4*3);
    }
    var menuWidth = 281;
    var slideWidth = $(window).width()-menuWidth;
    var slideHeight = height43(slideWidth);
    // all variables and functions declared directly inside some brackets
    // are available everywhere inside or subinside these brackets so you can reuse them
    function anotherFunctionSample(){
        alert('slideHeight : '+slideHeight);
        alert('new calculation with another width : '+height43(700));
    }
    anotherFunctionSample();
});

Then please have a look at javascript basis before trying going elsewhere...and maybe some primary Math lessons about cross product ;) Then jQuery is 'just' a javascript wrapper that helps a lot through different browser compatibilities interpreting things quite differently...work hard

dmidz
  • 896
  • 7
  • 20
  • Thanks for the info on how to structure the function & the equation, that's worked well! – Ila Sep 18 '11 at 21:40