Question

My code below works fine for getting the size of the first image and then adding margin-top and margin-left to each image on the page. But it’s using the first image as a basis for all the other images. How can I loop through and use the size of each image to find the values it should be using for margin-left and margin-top?

$j(document).ready(function () {

//get the image size:
var theHeight = $j("#co-logo img").height();
var theWidth = $j("#logo img").width();

//place them into the image styles:
$j("#co-logo img").css({ 'margin-top': -theHeight / 2 + "px", 'margin-left': -theWidth / 2 + "px" });

});

Answer 1

You should use .each():

$j(document).ready(
    function(){

    $('#co-logo img').each(
        function(){
            var theWidth = $(this).width();
            var theHeight = $(this).height();

            $(this).css({'margin-top': -theHeight / 2 + 'px', 'margin-left': -theWidth / 2 + 'px'});
        });
    });

References:

• .each().