I'm trying to implement something like a photo carousel in jQuery. This carousel could be filled with images using an array of image sources (I make an ajax request that returns a json with this data) and, once is filled, you can call a couple of methods, previous() and next() to move the carousel backward and forward respectively.
The thing is that this functionallity is already implemented and working, but I can't solve an issue on resizing process. For avoid that the images exceed the boundaries of the container, I have a method for creating and resizing the images, if needed.
this.getImageResized = function(imageSrc) {
var image = $('<img />', {src : imageSrc});
// Container ratio
var ratio = this.itemMaxWidth / this.itemMaxHeight;
// Target image ratio is WIDER than container ratio
if((image[0].width / image[0].height) > ratio) {
if(image[0].width > this.itemMaxWidth) {
image.css('width', this.itemMaxWidth + 'px');
image.css('height', 'auto');
}
// HIGHER
} else {
if(image[0].height > this.itemMaxHeight) {
image.css('width', 'auto');
image.css('height', this.itemMaxHeight + 'px');
}
}
// Embeds image into a wrapper with item's width and height
var wrapper = $('<span style="display : block; float : left; width : ' + this.itemMaxWidth + 'px; height : ' + this.itemMaxHeight + 'px"></span>');
image.appendTo(wrapper);
return wrapper;
};
Testing this function, I've found that sometimes, images are not resized as expected. I've used firebug console.log() to log the image[0].width just below jQuery element creation, finding out that sometimes the value is 0.
I'm not an expert on jQuery, but I suppose that when this happens (value is 0) is because the element is not ready.
How can I assure that the element is already loaded when I ask for its width and height values?
Is something like this possible?
var image = $('<img />', {src : imageSrc}).ready(function() {
// But image[0].width it's not available here!
});
Thank you for your help!