Adjustment to jQuery resize of images to not make them appear large at first

Question

Kind of an awkward title guys, sorry.

Anyway, I'm trying to resize my images with the following snippet of jQuery:

$(window).load(function(){
$('img.FancyBox').each(function(){
$(this).width($(this).width() * 0.25);
});
});

Now, this works, but it would be really nice if I could find a way to specify the images to load 25% of their original size, rather than loading their original size, and scaling down.

It works, but it looks kind of odd.

Any sort of workaround would be great!

Thanks!

Answer 1

you could set .FancyBox to display: none; in your CSS and then do:

$(window).load(function(){
    $('img.FancyBox').each(function(){
        $(this).width($(this).width() * 0.25);
        $(this).show();
    });
});