Question

I’m building my own photo gallery in javascript, partially for the experience, partially for a project. Right now, I’m getting stuck with some issues around objects.

When an Image object is created, it is pushed to an array in the Gallery object. Around the comment // constrain to width (line 55 in the gist), I’m trying to get the width and height properties from the object. If I console.log the variable img, I can see the properties and functions of the object. However, if I console.log(img.height);, I get undefined. What am I doing wrong?

The entire file is below. It’s also here in a gist for easier reading.

var Image = function(img, gallery){
    // init with an image in jquery form
    this.src = img.attr('src');

    this.setDimensions = function(){
        var temp_height, temp_width;
        $this = this;
        $this.image = $('<img />').attr('src', this.src).load(function(){
            $this.height = this.height;
            $this.width = this.width;
        });
    };

    // init functions
    this.setDimensions();
    gallery.images.push(this);


}; // Image

var Gallery = function(){
    this.width = $(window).width();
    this.height = $(window).height();
    this.images = [];

    this.createElements = function(){
        $('body').append('<div id="the_gallery"></div>');
        $('#the_gallery').css({width: this.width, height: this.height});
    };

    this.open = function(){
        this.createElements();

        var img = this.images[0];

        // see if the image is bigger than the window
        if( this.width >= img.width && this.height >= img.height) {
            console.log('image < window');
            // just show the image, centered
        }

        else {
            console.log('image > window');
            var temp_width, temp_height;
            // constrain to height
            if( img.width < img.height ) {
                console.log('image width < image height');
                temp_height = this.height;
                temp_width = (temp_height/img.height) * img.width;

                img.css({height:temp_height, width:temp_width});

            }

            // constrain to width
            else {
                console.log('image width > image height');
                temp_width = this.width;
                temp_height = (temp_width/img.width) * img.height;
                img.image.css({height:temp_height, width:temp_width});
            }

        }

        img.image.appendTo($('#the_gallery'));

    }; // open

    this.close = function(){
        $('#the_gallery').remove();
    }; // close
}; // Gallery

$(document).ready(function(){
    $('#gallery img').click(function(){
        launchGallery($(this));
    }); // click

    var gallery = new Gallery(),
        test = new Image($('#gallery img:first'), gallery);

    gallery.open();
}); // doc ready

Answer 1

I voted for closing, but here is some help:

When you call new Image, you reload it and set width and height when the load event fires. That is after the rest of the code runs – when you get to that point line 55, the image might not be loaded yet.

A simple solution would be to just grab the width/height directly from img.width() and always run the plugin on window.onload. If you want to support dynamically loaded images you’ll have to brush up on that logic, and wait until everything is loaded before building the gallery.

Also, avoid leaking globals, you’re missing var in $this = this (line 7).