Q:

jQuery adding elements to slideshow after load event

I am using the nivoSlider plugin to create a slideshow effect on a page. Currently, when the page loads, it randomly selects 5 images to cycle through using a php script.
The images to be used are placed inside a div like so:
<div id="slider">
<img src="image1" />
<img src="image2" />
<img src="image3" />
<img src="image4" />
<img src="image5" />
</div>

This is working OK, however I would like to load more images via AJAX after the page has loaded.
I have a PHP script to get the HTML for the extra images but I can't get the new images to be included in the cycle.
Is there anyway to get it to take these new images into account?
Any advice appreciated.
Thanks.

A:

It seems there is no easy way to reset the plugin. I tried to just call nivoSlider on an updated container, but it immediately returns (it checks if it already is installed to that element). Bypassing this check (by running $('#slider').removeData('nivoslider')) breaks it.
I guess there are two ways to tackle this problem. Either remove the slider container entirely, and rebuild it using the existing images and the new ones, or remove all traces of the plugin on the current container, add your images, and rerun the plugin. See this post on the support forums, where someone suggests how to remove the plugin from a container.

