anythingslider questions on loading from ajax

[whipdancer]

I’m attempting to use anythingslider. So far I’ve been able to get it on my page and load it with data, but the sizing has been inconsistent and sometimes it seems like the page & control loads before my ajax call finishes. So I assume that I’m not doing “something” correctly.

As for the load of the slider – the main call

$(function () {

getAssets();

});

which calls these functions

function getAssets() {

var urlMethod = "../MediaAsset.svc/GetAssets",

jsonData = { id: "0" };

jsonData = JSON.stringify(jsonData);

sendAjax(urlMethod, jsonData, populateSlider, errorFunction);

}

function populateSlider(data) {

var strHtml;

$.each(data, function(key, val) {

strHtml += "
";

});

$('#slider').html(strHtml);

$('#slider').anythingSlider({

buildStartStop: false,

easing: 'swing',

navigationSize: 3,

resizeContents: false

});

}

function errorFunction(xhr, status, error) {

var errval = jQuery.parseJSON(xhr.responseText);

errval += xhr.status;

errval += error;

$('#message').html(errval);

}

Populate slide is where I build the

[Mottie]

Did you see this demo?

Has the slider already been initialized before it’s populated, or after (as I see in the code)? Because if it was initialized before, then all of the options will be ignored the second time it is called.

[whipdancer]

I think that the slider is initialized after loading the data/new elements – or at least that is my intent, so that the slider window is the appropriate size. Sometimes the slider view window is very, very narrow – but when I refresh, it will then resize appropriately for the images in the slider.

I think it was coming across that demo that made me question how I am doing it. I’m very new to jquery (and javascript in general)…

With that in mind – I think the processing on my page is:

$(Document).ready calls the getAssets function, which calls the sendAjax function. The parameters I pass into sendAjax are my url for the ajax call, the parameters for the ajax call, the function to call on success, the function to call on failure.

On success, I call the function populateSlider – which performs “.each” on the data that was returned, building a series “<li>” and “<img>” tags, which then get added to the slider via “.html” – after which, I think i’m initializing the slider with specific options.

Based on that – am I initializing the slider when I call “.html”?

Should I instead be appending in the “.each” processing, as in the sample?

[whipdancer]

After a bit more research, it appears that the only sure-fire way to know i have my data from the ajax call – is to not initialize the slider until I get a readystate==4 from the ajax call. Wouldn’t happen to be able to offer some guidance on that, would you?

[Mottie]

LOL, to be honest, I actually suck at javascript… I learned how to program starting from jQuery so going back to pure js is difficult. I tend to use the getJSON function to do all that work. To check for errors, you can use ajaxError.

The way you have the code now should work fine… initializing the slider after the html addition is perfect. I was just asking because it is possible to replace all of the slider content and just call the plugin again to update: $('#slider').anythingSlider(); – at this point it will ignore any options added inside of the function call.

Based on the other question you asked about centering the image, I think you’ll need to wrap the image in a div and set the “resizeContents” option to true

strHtml += "
";

that with the css magic Chris shared to center the image horizontally and vertically should make everything purdy!

[Author]

Posts