Question

I thought I was being quite clever with this. I’ve made a little function that scales up or down an image to fit with margins within the browser window. With one image it worked great. Then I wanted to do it with several images, so I could click through the images in the same window. I tried using .each, but with little success. It scales up each image based on the dimensions of the first one only. Obviously I want each image to be scaled up depending on it’s own dimensions.

js bit:

$(window).bind("load resize", function(){

    var ww = $(window).width();
    var wh = $(window).height();
    wh = wh-50;
    ww = ww-225;
    var wr = (ww/wh);

    $("#slides div.scale img").each(function(){
        var ow = $("img").width();
        var oh = $("img").height();
        var or = (ow/oh);
        if (wr<or) {
            $("img").css('width',ww);
            $("img").css('height','auto');
        }
        else {
            $("img").css('height',wh);
            $("img").css('width','auto');
        };
    });
});

html bit:

<div id="slides">
    <div class="slide 1 scale"><img src="portrait.jpg" /></div>
    <div class="slide 2 scale"><img src="landscape.jpg" /></div>
    <div class="slide 3 scale"><img src="square.jpg" /></div>
    <div class="slide 4 scale"><img src="portrait.jpg" /></div>
</div>

Answer 1

$("#slides div.scale img").each(function(){
    var ow = $(this).width();
    var oh = $(this).height();
    var or = (ow/oh);
    if (wr<or) {
        $(this).css('width',ww);
        $(this).css('height','auto');
    }
    else {
        $(this).css('height',wh);
        $(this).css('width','auto');
    };
});

Try that?

Edit

I think this needs changed

function changeimage(){
    $("#slides div").css("visibility","hidden");
    $('#slidetitles span').hide();
    $("#slides div."+ns).css("visibility","visible");
    $("#slidetitles span."+ns).show();
    cs = ns;
};