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