Question

I have created a custom jQuery plugin that does some simple image resizing for my website. Here is the site: http://www.daemondeveloper.com/photography/gallery.php

As you can see, for debugging purposes I have made portrait images have an opacity of 0.5 and landscape images an opacity of 1. I classify images as portrait or landscape using this custom plugin:

(function($) {

$.fn.superFit = function(options) {

    var $this = $(this);
    var parent = $this.parent();
    var parentW = parent.width();
    var parentH = parent.height();
    var imgW = $this.width();
    var imgH = $this.height();

    var imgRatio = imgH / imgW;
    var parentRatio = parentH / parentW;



        if(imgRatio < parentRatio) //We have a landscape image
        {
            //First set the height of image to be 100%;
            $this.css('height', '100%');
            imgW = $this.width();
            parentW = parent.width();

            //Now center the image
            $this.css('margin-left', -(imgW/2)+(parentW/2));

        }else{ //We have a portrait image
            $this.css('width', '100%');
            $this.css('opacity', '0.5');
        }



}
    })(jQuery);

I want portrait images to fill up the width of its parent but overflow off the bottom of the parent. This seems to be working fine. However, the panoramic images (there are 2) that should have a landscape classification are being looked at by the jQuery as a portrait. That is, until you refresh the page. If you click on the Gallery menu item or hit refresh, all of a sudden the plugin works and you can see the landscape images become opacity 1 and fill up the parent as they should.

So what is causing the jQuery to fire only after refreshing the page again?? I am guessing it must have something to do with the way the pictures are loaded or something.

Finally, here is the code that runs the plugin function:

$('#gallery ul li').each(function() {
var $frame = $(this).children('div');

    var fw = $frame.width();
    var fh = $frame.height();
    $frame.children('img').superFit(); 

});

This is being ran on document.ready

UPDATE: Actually using refresh or F5 does NOT fix the issue. For some reason only when you click the Gallery menu item or get focus on the address bar and hit Enter does it work…

Answer 1

I am guessing it must have something to do with the way the pictures are loaded or something.

Yes, you won’t be able to get the dimensions of an image before it is loaded. On refresh the images will load from cache before DOMready.

Instead, hook on the .load() event.