Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.10.2018, 13:15
Новичок на форуме
Отправить личное сообщение для Sate Посмотреть профиль Найти все сообщения от Sate
 
Регистрация: 21.10.2018
Сообщений: 4

Как применить просмотрщик фотографий к динамически сгенерированному контенту
Добрый день.
У меня есть сайт в виде блога, у которого на главной странице отображаются посты блога.
При прокрутке вниз я делаю догрузку следующих записей из блога, и получаю аля ленту ВК.

Так вот, у каждого поста есть заголовок, текст до ката и набор фотографий.
Все фотки обернуты компонентом 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(), но в этом случае те записи которые выше дублируются и на каждую фотку создаются две галереи и т.д.

Подскажите пожалуйста как сделать это работоспособным?
Ответить с цитированием
  #2 (permalink)  
Старый 21.10.2018, 13:30
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Sate, либо в доках слайдера ищите метод типа udate и т.п., либо в результате ajax запроса устанавливайте плагин для только полученного контента.
Ответить с цитированием
  #3 (permalink)  
Старый 21.10.2018, 13:31
Новичок на форуме
Отправить личное сообщение для Sate Посмотреть профиль Найти все сообщения от Sate
 
Регистрация: 21.10.2018
Сообщений: 4

а можно пример как только для нового контента создать объекты SmartPhoto?
Ответить с цитированием
  #4 (permalink)  
Старый 21.10.2018, 13:39
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Ну если js-smartphoto, это класс изображений для слайдера, а допустим имя переменной в функции обработки результата асинхрогого запроса равно data, значит:

$(data).find(".js-smartphoto").SmartPhoto({......
Ответить с цитированием
  #5 (permalink)  
Старый 21.10.2018, 13:49
Новичок на форуме
Отправить личное сообщение для Sate Посмотреть профиль Найти все сообщения от Sate
 
Регистрация: 21.10.2018
Сообщений: 4

Сделал вот так
success: function (result) {
                    $("#content").append(result);
                    $(result).find(".js-smartphoto").SmartPhoto({
                        nav: false,
                        resizeStyle: 'fit'
                    });
                },


Не работает (
Ответить с цитированием
  #6 (permalink)  
Старый 21.10.2018, 14:04
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

$(result).find(".js-smartphoto").SmartPhoto({...}).end().appendTo("#content")


$("#content").append(result); - удалить.

Последний раз редактировалось laimas, 21.10.2018 в 16:03.
Ответить с цитированием
  #7 (permalink)  
Старый 21.10.2018, 21:50
Новичок на форуме
Отправить личное сообщение для Sate Посмотреть профиль Найти все сообщения от Sate
 
Регистрация: 21.10.2018
Сообщений: 4

Все получилось.
Спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как в IE динамически установить значение события onClick? Гость Элементы интерфейса 6 16.01.2011 23:46
Как применить css ко всем элементам внутри блока MaxB jQuery 12 28.05.2010 07:56
Как сделать динамически загружаемый список? mikeles AJAX и COMET 9 13.11.2009 15:13
Динамически увеличивающиеся изображения: как реализовать? cforest Events/DOM/Window 6 24.06.2009 17:16
как динамически добавить столбец oxx Элементы интерфейса 4 06.11.2008 17:23