Seeking help for an issue I am facing with my jQuery code. I have been trying to scale a group of images proportionally within an image carousel using jCarousel Lite plugin. However, the resizing code seems to work randomly and I can't figure out why.
The carousel has 4 different sets of images that can be selected through a navigation menu. But when the new set is chosen, sometimes the images fail to scale properly, resulting in cropped images at maximum width. This problem is more noticeable with portrait-oriented images on a landscape-oriented slider (900px x 600px).
I've tried changing the order of clicks, adjusting window size, and testing in different browsers, but the outcome remains unpredictable. Any insights on what could be causing this random behavior?
//Scaling images to fit #slider div proportionally
$('#slider ul li img').each(function() {
var maxWidth = $('#slider').outerWidth(false); // Max image width
var maxHeight = $('#slider').outerHeight(false); // Max image height
var ratio = 0; // Aspect ratio
var width = $(this).width(); // Current width
var height = $(this).height(); // Current height
// Check if current width exceeds max
if(width > maxWidth){
ratio = maxWidth / width; // Ratio for scaling
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height proportionally
height = height * ratio; // Update height
}
var width = $(this).width(); // Current width
var height = $(this).height(); // Current height
// Check if current height exceeds max
if(height > maxHeight){
ratio = maxHeight / height; // Ratio for scaling
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width proportionally
width = width * ratio; // Update width
}
});
initialize(); //Initiate jCarousel Lite carousel