AnythingSlider – JSON Flickr Addition – IE Not Joining the Party

[TheDoc]

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!

[TheDoc]

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

[TheDoc]

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

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

[TheDoc]

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

});

[TheDoc]

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!

[Mottie]

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:

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.

[TheDoc]

Absolute legend, Mottie!

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

[Mottie]

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%;

}

[TheDoc]

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

[ferrabraiz]

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

[Author]

Posts