Как применить просмотрщик фотографий к динамически сгенерированному контенту
Добрый день.
У меня есть сайт в виде блога, у которого на главной странице отображаются посты блога. При прокрутке вниз я делаю догрузку следующих записей из блога, и получаю аля ленту ВК. Так вот, у каждого поста есть заголовок, текст до ката и набор фотографий. Все фотки обернуты компонентом SmartPhoto (хз, можно ли ссылку тут выкладывать или нет, но думаю вы знаете про такой просмотрщик). Так вот внизу страницы стоит код:
$(document).ready(function () {
$(".js-smartphoto").SmartPhoto({
nav: false,
resizeStyle: 'fit'
});
});
Который ищет все объекты с классом js-smartphoto и делает из них галереи. Все работает хорошо, до тех пор пока не придет очередная порция контента при скролинге вниз. Кстати контент добавляется ajax запросом по урлу с оффсетом, который возвращает 5 следующих записей, и далее если есть такие записи то делаю
$("#content").append(result);
HTML код со статьями выглядит примерно так <div id="content"> <div class="article">...</div> <div class="article">...</div> <div class="article">...</div> <div class="article">...</div> <div class="article">...</div> </div> Что пробовал делать: после append результата снова вызывать $(".js-smartphoto").SmartPhoto(), но в этом случае те записи которые выше дублируются и на каждую фотку создаются две галереи и т.д. Подскажите пожалуйста как сделать это работоспособным? |
Sate, либо в доках слайдера ищите метод типа udate и т.п., либо в результате ajax запроса устанавливайте плагин для только полученного контента.
|
а можно пример как только для нового контента создать объекты SmartPhoto?
|
Ну если js-smartphoto, это класс изображений для слайдера, а допустим имя переменной в функции обработки результата асинхрогого запроса равно data, значит:
$(data).find(".js-smartphoto").SmartPhoto({......
|
Сделал вот так
success: function (result) {
$("#content").append(result);
$(result).find(".js-smartphoto").SmartPhoto({
nav: false,
resizeStyle: 'fit'
});
},
Не работает ( |
$(result).find(".js-smartphoto").SmartPhoto({...}).end().appendTo("#content")
$("#content").append(result); - удалить. |
Все получилось.
Спасибо :) |
| Часовой пояс GMT +3, время: 19:52. |