Question

I’ve got a function that resizes images based on some criteria and would like it to calculate all elements within the .z class individually and then return them.

Using .each runs all of the images through the function, but returns the same dimensions for all of them. Not sure where I’m screwing up…

Test site is here:

http://brantley.dhut.ch/

(also have to work out the deal with the fade in before the image has been fully resized, but that will be another question)

JavaScript:

jQuery(function($) {
    $('.z').respond();
});

(function($){
    $.fn.respond = function() {

        /* initialize function on window load and resize */
        $(document).ready(function() {
            dimensions();
        });
        $(window).load(function() {     
            dimensions();
        });
        $(window).resize(function() {
            dimensions();
        });

        /* declare affected elements */
        var pic = this

        /* set image's height or width depending on the browser window's size */
        function dimensions() {
            return pic.each(function() {

            /* declare variables */
            var browserWidth = $(window).width();
            var imgRatio = pic.width() / pic.height()
            var availableHeight = ($(window).height() - $('header').height() - $('footer').height() - 80)
            var browserRatio = browserWidth / availableHeight

            /* image sizing logic */
            if (browserRatio >= imgRatio) {
                if (browserWidth > 640) {
                    /* if the browser is landscape and bigger than mobile, set the image's height to fill the available space */
                    pic.height(availableHeight).width('auto');
                    //$('body').css('background', 'blue');
                } else {
                    /* it's mobile */
                    pic.width(browserWidth - 40).height('auto');
                    //$('body').css('background', 'red');
                }
            } else {
                /* if the browser is portrait, set the image's width to fill the page */
                pic.width(browserWidth - 40).height('auto');
                //$('body').css('background', 'green');
            }

            /* horizontally center content */
            pic.css('margin-left', (browserWidth - pic.width())/2);

            });

        };

    };
})( jQuery );

Answer 1

You’re using pic.each() and inside the function that is supposed to be called on every element selected by the jquery object “pic”, you’re using “pic” aswell. Try using this there instead:

return pic.each(function() {
        /* declare variables */
        var browserWidth = $(window).width();
        var imgRatio = $(this).width() / $(this).height()