1

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?

Romes
  • 3,088
  • 5
  • 37
  • 52
  • 1
    Could there be meta data in the image that describes the orientation of the camera when the picture was taken, and maybe only Safari recognizes that data? Could be especially true if the pictures were taken using an iPhone. – MrOBrian Sep 25 '12 at 18:27
  • I am not sure. The person uploading the photos to the feed makes sure they are right side up and not rotated before he puts them in. But then for some reason they show up rotated even though it was uploaded right side up. – Romes Sep 25 '12 at 18:34
  • Since the images are showing up rotated when you view them directly, I don't think there is anything wrong with your code. You might just need to find out how they are being rotated, and if they always show up correctly when using Apple software, but not when using others, then maybe try some other method of rotating the images before uploading them. – MrOBrian Sep 25 '12 at 18:36
  • I think you're right. When I copy the image to my desktop it saves the file right side up. BUT when I drag it back into a blank window displaying the image locally from my machine, it shows up rotated again. What I ended up doing was opening the file in Mac Preview, rotating it to the left and the back to upright position, saving it, and then putting it in the browser again. BOOM right side up. Thanks for getting me on the right track. – Romes Sep 25 '12 at 18:56

1 Answers1

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.

Romes
  • 3,088
  • 5
  • 37
  • 52