WordPress.org

Ready to get started?Download WordPress

Forums

Flickr Photostream
Photos don't appear in IE8 (2 posts)

  1. steve.pritchard
    Member
    Posted 5 months ago #

    My flickr sets and galleries displayed beautifully in Chrome (I think this plugin is fantastic!), however when I viewed the pages with IE8 the photos didn't appear - just got blank space.

    I tried changing the "Browser Mode" in IE8 using the IE Developer Tools: photos appeared ok with mode = IE7 or IE8 compatibility, but not if mode = IE8.

    The problem appears to be IE8's rendering of the <div class="jg-image"... tag - it thinks that the DIV is 0 pixels wide. If I force the width to be 200 pixels (say), then the photo is visible. IE8 isn't taking the DIV's width to be the width of the IMG that the DIV contains.

    I thought I'd found a rough-and-ready fix: in jquery.justifiedgallery.js buildImage() we know what the width & height of the image is, so set these explicitly on the jg-image DIV:


    function buildImage(image, suffix, nw, nh, l, minRowHeight, settings){
    var ris;
    ris = "<div class=\"jg-image\" style=\"left:" + l + "px; width: " + nw + "px; height: " + nh + "px;\">";
    ris += " <a href=\"" + image["href"] + "\" ";
    ...

    With this change, the photos display ok in Chrome and IE8.

    However now the photos don't appear in IE7 (or IE8 compatability mode). The problem seems to be because the DIV is the same size as the IMG. If I make the DIV 5 pixels wider than the IMG, the the images display fine!!

    Has anyone encountered any of these problems? Any suggestions for a fix that will work across IE versions?

    https://wordpress.org/plugins/flickr-photostream/

  2. steve.pritchard
    Member
    Posted 5 months ago #

    I think I've got to the bottom of this problem - it's resulting from a clash between the theme I'm using (clean-retina) and the plugin.

    The stylesheet for clean-retina includes:

    img {
    max-width:100%;
    height:auto;
    vertical-align:top;
    }

    and these styles get applied to the IMGs produced by the flickr-photostream plugin. The "max-width:100%;" property is being mis-interpreted by IE8, and means that the images don't appear.

    I think that clean-retina sets max-width for mobile devices - see http://davidwalsh.name/image-max-width

    If I modify jquery.justifiedgallery.min.css to include:

    .justifiedGallery .jg-image img {
    border: none;
    margin: 0;
    padding: 0;
    display: none;
    max-width: none;
    }

    then the plugin seems to work ok on IE7 & IE8 & IE8 compatibility mode.

    (i.e. the height and width aren't needed on the DIV jg-image as I originally thought)

Reply

You must log in to post.

About this Plugin

About this Topic

Tags