Question

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:

$.post('feedURL', {},function(data){
    var slides = $(data).find('slides');
    for(var i = slides.length -1;i>=0;i--){
        var obj = $(slides[i]);
        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
    }
});

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.

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
        }
    });
}

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?

Answer 1

It was meta data in the image files that I was getting in the feed. Once I took the photo file, rotated it a couple time and then rotated it back to normal and saved it, it started to show up right in my feed.