Feed image shows rotated in certain browsers

madelynqllee

New Member
I have an odd issue. I'm using the CSS Anything slider thanks to Chris at css-tricks.com and I am using jQuery to pull in a XML feed of images to be displayed in the slider:\[code\]$.post('feedURL', {},function(data){ var slides = $(data).find('slides'); for(var i = slides.length -1;i>=0;i--){ var obj = $(slides); var image = obj.find('ImageURL').text(); var str = ' <li>'; str += ' <img src="'+ image +'" />'; str += ' </li>'; $(str).find('img').one('load complete', function() { imageResize(); }).end().appendTo($("#slider")); // Slider is a UL element on the page }});\[/code\]Once the image has loaded, I run an image resize function. My images are being randomly uploaded at all different sizes, this is the reason for the resize function. \[code\]function imageResize() { // Create the correct aspec ratio for images that are too large. $('#slider li img').each(function() { var maxWidth = 417; // Max width for the image var maxHeight = 313; // Max height for the image var ratio = 0; // Used for aspect ratio var width = $(this).width(); // Current image width var height = $(this).height(); // Current image height // Check if the current width is larger than the max if(width > maxWidth){ ratio = maxWidth / width; // get ratio for scaling image $(this).css("width", maxWidth); // Set new width $(this).css("height", height * ratio).css("margin-top", (maxHeight - height * ratio) / 2); // Scale height based on ratio height = height * ratio; // Reset height to match scaled image width = width * ratio; // Reset width to match scaled image } // Check if current height is larger than max if(height > maxHeight){ ratio = maxHeight / height; // get ratio for scaling image $(this).css("height", maxHeight); // Set new height $(this).css("width", width * ratio).css("margin-top", "0"); // Scale width based on ratio width = width * ratio; // Reset width to match scaled image } });}\[/code\]My images from my feed load in fine, however some of the images are coming in rotated to the side. Here is the odd part. When you look at the image URL from the feed and display it in a new window, the actual image from the feed is rotated on its side, but it is only rotated for browsers Chrome and Firefox, but it is NOT rotated in Safari. No matter the browser, inside the actual slideshow they are always rotated to the side.If I right click and save the image from the feed to my desktop, the image is saved right side up and NOT rotated.What in the world is going on? Anyone have a clue?
 
Back
Top