.destroy (backstretch) не работает с контентом ajax - PullRequest
Новая
       29

.destroy (backstretch) не работает с контентом ajax

0 голосов
/ 22 ноября 2018

У меня есть веб-сайт с одним экземпляром backstretch для слайдера (в div #backstretch), загруженным из массива изображений на самом сайте.Массив выглядит следующим образом: 

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

Чтобы изменить набор изображений этого слайдера по щелчку, я загружаю новый контент на своем сайте с помощью jquery .load ().Новый контент также имеет массив с новыми изображениями.Чтобы начать загрузку, есть несколько элементов div с классом .item под ползунком, по которому можно щелкнуть, чтобы начать загрузку нового набора изображений.При нажатии на один элемент URL-адрес здесь динамически устанавливается с индексом элементов. 

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

Проблема в том, что при первом изменении набора изображений он работает нормально.Старый набор уничтожен, а новый - скользящий.Но если я нажму на следующий элемент, чтобы загрузить следующее изображение, установите старые изображения и изображения первого набора, также появившиеся в слайд-шоу.Они на самом деле не уничтожены.Как я могу это исправить?

1 Ответ

0 голосов
/ 26 ноября 2018

Так что теперь я работаю, с помощью сопровождающего backstretch. 

jQuery(function(e) {
$(document).on("click", '.inneritem', function(index, element) {
var indexe = $('.inneritem').index(this);  // count items
var singleurl = 'single_' + indexe + '.html';  // create url for each item
$('html').animate({scrollTop: '0px'}, 1200).promise().then(function() {     // scroll to top
var $instance = $('#backstretch').data('backstretch');  // get the instance
$instance && $instance.destroy(true);  // destroy it
$('#singleview').fadeIn().load(singleurl);   // load new backstretch slides
});
});
});

Цель состоит в том, чтобы поместить вызов и уничтожить экземпляр в нужном месте.В коде моего вопроса был какой-то код, отсутствующий, чтобы упростить его, но этот код был основной проблемой: 

$('html, body').animate({scrollTop: '0px'}, 1200, function() {
$('#singleview').fadeIn().load(singleurl);

Я хотел прокрутить верх, прежде чем дважды загрузить загрузку содержимого с помощью backstretch ('html, body')).Я не видел этого раньше..promise (). then (был добавлен. Теперь он работает как шарм.

...