I am using rcarousel (http://ryrych.github.io/rcarousel/) and ajax (call to a php page) to show different galleries. I have a page that shows a bunch of different pictures from different galleries, the user selects one, which prompts an ajax call back to my php page and jquery slides it over to show the carousel. This is technically working but my problem is that the carousel itself doesn't seem to reinitialize. The #carousel div gets the images and loads them up, but they are just images, and the pages are not updated. Using firebug, I can see that the first time it loads, it walks through
$( "#carousel" ).rcarousel({
auto: {enabled: false},
start: generatePages,
visible: 4,
pageLoaded: pageLoaded,
width: 160,
height: 120,
margin:20
});
and then goes and does the generatePages and pageLoaded functions. But after I click on an image, it still parses $( "#carousel" ).rcarousel({ and the options, but then it just stops. I need to know what to call to re-initialize (or kill and start over) the carousel.
After some rooting around, I found:
return !( $.isFunction(callback) &&
callback.call( this.element[0], event, data ) === false ||
event.isDefaultPrevented() );
in the jquery.ui.widget.js file (line 230), but I'm not sure if that's the problem, or if it were, what to do about it... Anyone have any suggestions or can point me in the right direction and I will literally mail you a beer!
*Update*** So having done some more research, I think what I need to do is either completely destroy the widget or instead of using a sledgehammer, just reinit it somehow. I see that ui.widget.js has this function:
destroy: function() {
this.element
.unbind( "." + this.widgetName )
.removeData( this.widgetName );
this.widget()
.unbind( "." + this.widgetName )
.removeAttr( "aria-disabled" )
.removeClass(
this.widgetBaseClass + "-disabled " +
this.namespace + "-state-disabled" );
},
I tried adding:
destroy: function()
{
this.rcarousel.remove();
$.Widget.prototype.destroy.call(this);
}
to ui.carousel.js and then calling it via
$( "#carousel" ).rcarousel( "destroy" );
but that completely breaks the carousel.