Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.04.2020, 12:37
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 262

MagnificPopup и Ajax
Здравствуйте.
Есть галерея со всплывающими фотографиями на MagnificPopup, подключается так:
$(document).ready(function () {	
	$(".card-item").magnificPopup({
		delegate: 'a',
		type: 'image',

		gallery: {
			enabled: true,
			navigateByImgClick: true,
			preload: [0, 1] 
		}
	});
})

Проблема в том, что в этой галереи есть кнопка "Загрузить еще", которая добавляет новые элементы аяксом (причем это сделано с помощью большого и сложного компонента pdoPage для MODX, а в его начинке трудно разобраться)... и, соответственно, эти новые элементы уже не попадают в галерею. Как быть?
Ответить с цитированием
  #2 (permalink)  
Старый 01.04.2020, 13:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,586

Igorsrt,
новые элементы точно также проинициализировать, после их добавления на страницу.
Ответить с цитированием
  #3 (permalink)  
Старый 01.04.2020, 13:37
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 262

да, в html все элементы выглядят одинаково (и те которые были изначально, и те которые аяксом добавляются)... насколько я понимаю, нужно как-то скрипт галереи перезапускать после аякса, что бы он заново ее формировал
Ответить с цитированием
  #4 (permalink)  
Старый 01.04.2020, 13:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,586

Igorsrt,
$(".card-item").magnificPopup({}).addClass("old");
Ajax ...
$(".card-item:not(.old)").magnificPopup({}).addClass("old") ;
Ответить с цитированием
  #5 (permalink)  
Старый 01.04.2020, 14:17
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 262

чувствую, что какая-то умная мысль у Вас... но понять не могу пока ((
Ответить с цитированием
  #6 (permalink)  
Старый 01.04.2020, 16:20
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 262

код html:
<div class="project-cards" id="pdopage">

                <ul class="pagination" style="display: none;"><li class="page-item disabled"><a class="page-link" href="#">Первая</a></li><li class="page-item disabled"><a class="page-link" href="#">«</a></li><li class="page-item active"><a class="page-link" href="o-kompanii.html?page=1">1</a></li><li class="page-item"><a class="page-link" href="o-kompanii.html?page=2">2</a></li><li class="page-item"><a class="page-link" href="o-kompanii.html?page=3">3</a></li><li class="page-item"><a class="page-link" href="o-kompanii.html?page=2">»</a></li><li class="page-item"><a class="page-link" href="o-kompanii.html?page=3">Последняя</a></li></ul>
            <div class="rows row">
                        
                        <div class="col-sm-6 col-lg-4">
                    <div class="card-item "><a href="/assets/images/resources/2/.jpg"><img src="/assets/images/resources/2/small/.jpg" alt="photo"></a><span class="card-icon fas fa-search-plus" aria-hidden="true"></span></div>
                </div>

                        <div class="col-sm-6 col-lg-4">
                    <div class="card-item "><a href="/assets/images/resources/2/-1.jpg"><img src="/assets/images/resources/2/small/-1.jpg" alt="photo"></a><span class="card-icon fas fa-search-plus" aria-hidden="true"></span></div>
                </div>

                        <div class="col-sm-6 col-lg-4">
                    <div class="card-item "><a href="/assets/images/resources/2/-2.jpg"><img src="/assets/images/resources/2/small/-2.jpg" alt="photo"></a><span class="card-icon fas fa-search-plus" aria-hidden="true"></span></div>
                </div>

                   
    
    </div><div class="button--light text-center"><button id="moreProjects">Смотреть все проекты</button></div>
            </div>
Ответить с цитированием
  #7 (permalink)  
Старый 02.04.2020, 08:37
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 262

разобрался
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ajax разсинхронизация. Sochirom AJAX и COMET 11 27.02.2018 06:10
Как отправить из Ajax одну переменную и получить ответ в Ajax виде массива? olegalimov AJAX и COMET 42 14.02.2018 09:35
Отправка формы после ajax проверки ShutTap Общие вопросы Javascript 15 08.04.2016 11:46
Ajax таблица gofkane Работа 1 26.09.2011 17:26
Ajax разбор метода mycoding jQuery 14 21.05.2010 09:57