Grow your CSS skills. Land your dream job.

AnythingSlider – JSON Flickr Addition – IE Not Joining the Party

  • # July 8, 2011 at 8:54 pm

    Hello all!

    Site in question: http://tinyurl.com/64hg69n

    Attempt: Grabbing images from Flickr via JSON and putting them into the AnythingSlider.

    Working Browsers: Chrome, Safari, Firefox
    Naughty Browsers: IE7, IE8
    Not Tested: IE9

    Problem: In IE7 and IE8, the slider doesn’t show at all. Have tried many things but to no avail. Pretty much a noob when it comes to jQuery, so any help will be appreciated!

    @Mottie – feel free to implement some of the Flickr stuff into the documentation on github – all of the credit there goes to @jamy_za!

    # July 8, 2011 at 9:23 pm

    I feel like it has to do with the JSON call. This link sort of gets me close

    http://stackoverflow.com/questions/264216/getjson-returning-cached-data-in-ie8

    Though I don’t know what I would do with any of the info! haha

    # July 8, 2011 at 9:46 pm

    And an isolated version so that we know there are no conflicts:

    http://css-plus.com/temp/flickr/

    # July 8, 2011 at 10:04 pm

    I have managed to make it work in IE8 by delaying it a little bit. Certainly not ideal though:

    $(document).ready(function(){
    setTimeout(function(){
    $('#slider').anythingSlider({
    autoPlay : true,
    resizeContents : true, // If true, solitary images/objects in the panel will expand to fit the viewport
    expand : false,
    buildArrows : false,
    buildNavigation : false,
    buildStartStop: true
    });
    },300);
    });
    # July 8, 2011 at 10:13 pm

    Semi-solved:

     if ( $.browser.msie ) {
    $(document).ready(function(){
    setTimeout(function(){
    $('#slider').anythingSlider({
    autoPlay : true,
    resizeContents : true, // If true, solitary images/objects in the panel will expand to fit the viewport
    expand : false,
    buildArrows : false,
    buildNavigation : false,
    buildStartStop: true
    });
    },300);
    });
    } else {
    $(window).load(function(){
    $('#slider').anythingSlider({
    autoPlay : true,
    resizeContents : true, // If true, solitary images/objects in the panel will expand to fit the viewport
    expand : false,
    buildArrows : false,
    buildNavigation : false,
    buildStartStop: true
    });
    });
    }

    If anyone can provide a solution better than delaying the function for IE that would be great!

    # July 8, 2011 at 10:18 pm

    Hi TheDoc!

    After some troubleshooting (I wish IE would DIAF) I found that the slider width and height ended up being zero, even with the slider being called on window load… I think the problem is that window load is being called too early, so the best solution (tested and it works) would be to include the slider initialization in the getJSON callback, like this:

    jQuery(document).ready(function(){
    $.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=72157626772793930&nsid=61093603@N06&lang=en-us&format=json&jsoncallback=?",
    // process feed
    function(data) {
    $.each(data.items, function(i,item){
    var re = /_m.jpg/gi,
    str = item.media.m,
    larger = str.replace(re, "_z.jpg");
    $("").attr("src", larger).appendTo("#slider").wrap('
  • ').wrap('');
    if ( i >= 16 ) { return false; }
    });

    $('#slider').anythingSlider({
    autoPlay : true,
    resizeContents : true,
    expand : false,
    buildArrows : false,
    buildNavigation : false,
    buildStartStop: true
    });

    }); // end getJSON

    });

    And a couple of other things I noticed…

    This is not valid:

    < ![if !IE]>
    < ![endif]>

    And you are loading jQuery twice on that page, once here:

    Which is loading jQuery 1.6.2, so you can pretty much ignore the “ver” on the end and the second time with the AnythingSlider code, which is the one that could be removed. It’s not that big a deal, but it’s one less file to grab.

    # July 8, 2011 at 11:15 pm

    Absolute legend, Mottie!

    I played around with that damn window.load so much!

    # July 9, 2011 at 12:14 am

    Cool! So I added a demo and gave you both credit :P

    The only thing you should change, which I didn’t catch, is to change the i >= 16 to before all of the code. Here is the demo code I made, I tweaked it a bit more and only used the thumbnail size image – because it’s a demo :P

    var maxImages = 8,
    feedUrl = "http://api.flickr.com/services/feeds/photos_public.gne?id=72179079@N00&lang=en-us&format=json&jsoncallback=?";

    $.getJSON(feedUrl, function(data) {
    // process feed
    $.each(data.items, function(i, item) {
    if (i < maxImages) {
    var imgsrc = item.media.m; // thumbnail
    fullImg = imgsrc.replace(/_m.jpg/gi, "_z.jpg"); // full-sized image
    $("")
    .attr("src", imgsrc) // change "imgsrc" to "fullImg" as desired
    .appendTo("#slider")
    .wrap('
  • ');
    }
    });

    // initialize the slider
    $('#slider').anythingSlider();

    });

    Oh, and resizeContents doesn’t work in this situation because it targets the link wrapping the image, so you might need to add some extra css

    #slider img {
    width: 100%;
    height: 100%;
    }
    # July 10, 2011 at 7:22 pm

    Cheers, Mottie. I have updated my page with the new code – very well done!

    # June 2, 2013 at 8:53 am

    The Doc, Mottie thks!! your solution helped me indirectly!!!

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".