I've a website with one instance of backstretch for a slider (in div #backstretch), loaded from an array of images on the site itself. The array looks like this:
<script>
$('#backstretch').backstretch([
[
{ width: 1400, url: "./img/05_1400.jpg" },
{ width: 1000, url: "./img/05_1000.jpg" },
{ width: 780, url: "./img/05_780.jpg" },
{ width: 500, url: "./img/05_500.jpg" }
],
[
{ width: 1400, url: "./img/02_1400.jpg" },
{ width: 1000, url: "./img/02_1000.jpg" },
{ width: 780, url: "./img/02_780.jpg" },
{ width: 500, url: "./img/02_500.jpg" }
]
], {
fade: 2000,
duration: 5000
});
</script>
To change the set of images of this slider on click, I load new content in my website with jquery .load(). The new content has also an array with new images. To initiate the load there are some divs with class .item below the slider to click on to start load the new set of images. By clicking on one item the url here is dynamically set up with the index of items.
jQuery(function(){
$(document).on("click", '.item', function(index, element) {
var index = $('.item').index(this);
var singleurl = 'single_' + index + '.html';
var $instance = $('#backstretch').data('backstretch');
$instance.destroy('preserveBackground');
$('#singleview').fadeIn(1500).load(singleurl);
});
The problem is, that the first time I change the set of images it works fine. The old set is destroyed and the new set is sliding. But if I cklick on the next item to load the next image set the old images and the images of the first set appearing in the slidshow too. They are not realy destroyed. How ca I fix it?