pdoPage и скрипт Lightgallery

Есть галерея с видеороликами — каждый ролик — отдельный документ modx
при нажатии на постер — видео открывается в отдельном окне с помощью Lightgallery

при использовании ajax пагинации — при переходе на следующую страницу скрипт Lightgallery работать перестает — при клике на постер видео не открывается во всплывающем окне
В чем причина?

Вызов pdoPage
<div id="pdopage">
    <div class="rows">
  <div id="video-thumbnails"> 
      
[[!pdoPage? 
&limit=`4`
&pageLimit=`7`
&totalVar=`total`
&pageVarKey=`page`
&pageNavVar=`page.nav`
&ajaxMode=`default`
&tpl=`video`
&parents=`9`
&includeTVs=`img`
&tplPageWrapper=`@INLINE <ul class="pagination add-bottom">[[+first]][[+prev]][[+pages]][[+next]][[+last]]</ul>`
&tplPageFirst=``
&tplPageFirstEmpty=``
&tplPageLast=``
&tplPageLastEmpty=``
&tplPagePrev=`@INLINE <li class="prev"><a href="[[+href]]"></a></li>`
&tplPagePrevEmpty=`@INLINE <li class="prevempty"><span></span></li>`
&tplPageNext=`@INLINE <li class="next"><a href="[[+href]]"></a></li>`
&tplPageNextEmpty=`@INLINE <li class="nextempty"><span></span></li>`
&tplPageActive=`@INLINE <li><span class="current">[[+pageNo]]</span></li>`
]]
    </div>
     </div>
 <div class="pagination0">   
[[!+page.nav]]
</div>

</div>
посмотреть тут
test.hograllyminsk.com/gallery/
раздел Видео
igor
03 июня 2016, 09:59
modx.pro
2 378
+1

Комментарии: 29

Андрей
04 июня 2016, 15:42
0
Если не ошибаюсь то нужно использовать callbacks after, чтобы инициализировать Lightgallery после перехода на другую страницу:

pdoPage.callbacks['after'] = function(config, response) {
    console.log('Конфиг после загрузки!', config);
    console.log('Ответ от сервера!', response);
}
    igor
    04 июня 2016, 20:27
    0
    это я тоже предположил
    но как именно туда вставить инициализацию?
    и что делать с основной инициализацией
    она выглядит так

    <script type="text/javascript">
     $(document).ready(function(){
     $('#video-thumbnails').lightGallery({
        loadYoutubeThumbnail: true,
        youtubeThumbSize: 'default',
        loadVimeoThumbnail: true,
        vimeoThumbSize: 'thumbnail_medium'
    });	
      });
     </script>
    если не сложно подскажите
    я и так и так ковырял и не вышло
      igor
      05 июня 2016, 20:12
      0
      подскажет кто?
        Виталий Батушев
        06 июня 2016, 04:38
        0
        Может, не делать страницами pdoPage, а использовать плагин pager указанной галереи?
        Да и отвлеченный вариант он хорош разве что для философских симпозиумов, а я вот не могу ничего сказать, пока конкретный пример не посмотрю. Городить же собственный пример ради чьего-то интереса — увы, есть множество других интересных вещей в моей жизни. Думаю, у других такая же ерунда.
          igor
          06 июня 2016, 04:45
          0
          что за плагин такой? дай ссылочку
          я что то не нашел

          а конкретный пример я же выше написал на свой случай где смотреть
igor
06 июня 2016, 05:46
0
Вобщем придумал я так
Совместил pdoPage и Rowboat

[[!pdoPage? 
    &element=`Rowboat`
    &table=`ass_page_assets`
    &sortBy=`asset_id`
    &totalVar=`rowboat.total`
    &pageLimit=`10`
    &tpl=`innerassall`
    &where=`{"page_id":10}`
     &ajaxMode=`default`
.......
]]
к сожалению Rowboat не имеет возможностей объединять таблицы left join
а у галереи Asset Manager их две
ну да ладно
вытащил параметр asset_id из ass_page_assets

чанк для формирования вывода фото с увеличением выглядит так

<a href="[[+asset_id:scale2w=`1200`]]" class="col-md-3 col-sm-4 col-xs-6" >
           <img src="[[+asset_id:resize=`400x270`]]" >
	    </a>
все работает
только надо конкретно указывать
&where=`{«page_id»:10}` — откуда брать фото

теперь бы побороть отключение работы увеличителя картинок Lightgallery после перехода по страницам
ajax пагинация отрубает инициализацию Lightgallery
тут сказали надо использовать callback функцию pdoPage
но я не могу понять как в нее вставить заново эту инициализацию, в каком месте, и что делать с основным вызовом Lightgallery
если подскажете как и что вставлять для этого — будет просто здорово)
и галерея с названием ass будет не такой уж задницей)
    Владимир
    06 июня 2016, 06:35
    0
    Да, не пугает даже префикс _ass))) На что только люди не пойдут, лишь бы нормальную галерею не покупать!))))
    Шутка. Поковырять тоже интересно, как самоцель.
      igor
      06 июня 2016, 07:06
      0
      а что с отключением jquery при аякс пагинации?)
      помогите забить последний гвоздь в эту задницу)
        Владимир
        06 июня 2016, 07:19
        0
        О, увидел и понял что мне как раз сейчас именно этот (Lightgallery) плагин галереи понадобится Vimeo крутить в лайтбоксе.
        Ща будем посмотреть подробнее, там и пагинация будет нужна)…
          igor
          06 июня 2016, 07:21
          0
          надеюсь и жду!!!)
            Виталий Батушев
            06 июня 2016, 09:11
            0
            Насколько я понял, достаточно подключить (у тебя уже подключен) и в вызове активировать:
            $('#video-thumbnails').lightGallery({
                loadYoutubeThumbnail: true,
                youtubeThumbSize: 'default',
                loadVimeoThumbnail: true,
                pager: true,
                vimeoThumbSize: 'thumbnail_medium'
            });
              igor
              06 июня 2016, 10:00
              0
              Виталий! Это не то что мне нужно) Pager — это просто точки для навигации по элементам галереи — они появляются при открытие модального окна в самом низу этого окна)
              А мне нужна пагинация на самой странице с миниатюрами фоток или видео
              собственно саму пагинацию я уже сделал с pdoPage
              осталось выяснить почему режим ajax для нее отрубает lightgallery при переходе по страницам и как это пофиксить
                Андрей
                07 июня 2016, 13:42
                +1
                Нужно читать документацию в первую очередь, какие методы есть у скрипта.

                Вот решение:

                <script type="text/javascript">
                        $(document).ready(function(){
                                
                            var gallery = $("#video-thumbnails");
                            
                            gallery.lightGallery({
                            
                                loadYoutubeThumbnail: true,
                                youtubeThumbSize: 'default',
                                loadVimeoThumbnail: true,
                                vimeoThumbSize: 'thumbnail_medium'
                                
                            }); 
                
                            pdoPage.callbacks['after'] = function(config, response) {
                                 
                                gallery.data('lightGallery').destroy(true);
                                 
                                gallery.lightGallery({
                                    loadYoutubeThumbnail: true,
                                    youtubeThumbSize: 'default',
                                    loadVimeoThumbnail: true,
                                    vimeoThumbSize: 'thumbnail_medium'
                                }); 
                                
                                $('#pdopage').css('opacity','1');
                            }
                        });
                </script>

                Добровольное пожертвование приветствуется =))
                  igor
                  07 июня 2016, 15:06
                  0
                  не вопрос. но не работает пока и так)
                  все скопировал к себе — результат прежний

                  еще и картинки постеров пропадают вдобавок

                    Андрей
                    07 июня 2016, 15:14
                    0
                    Доступы можете прислать в личку? Должно всё работать, проверено. Где то у вас не так настроено что то.
                      igor
                      07 июня 2016, 15:22
                      0
                      отправил
                      Андрей
                      07 июня 2016, 15:29
                      0
                      Попробуйте ещё раз, не приходит что то.
                      igor
                      07 июня 2016, 15:30
                      0
                      я через форму в личке отправлял
                      давай так свой майл тогда — раз там проблемы
                      Андрей
                      07 июня 2016, 15:35
                      0
                      Странно, тогда сюда — mail@mswork.ru
                      igor
                      07 июня 2016, 15:44
                      0
                      дошло?
                      Андрей
                      07 июня 2016, 15:45
                      0
                      Да, всё пришло, сейчас разберёмся, отпишу на почту тогда
                      igor
                      07 июня 2016, 15:52
                      0
                      ок
                      Андрей
                      07 июня 2016, 17:08
                      +1
                      Всё готово, отписал на почту =)
Владислав
11 июня 2017, 03:50
0
Приветствую! Мучаюсь с проблемой… надеюсь на помощь
При ajax-загрузке контента с помощью pdopage перестают работать скрипты слайдеров и галерей, потому что они работают только с контентом, который был загружен во время загрузки страницы. Перепробовал уже
$('body').on( 'click', '.btn-more', function() { });
и
pdoPage.callbacks['after'] = function(config, response) { };
и
$(document).ajaxSuccess(function() { };

ничто не отрабатывает правильно. При вызове обычного alert, изначально появляется модальное окно, а уже потом подгружается контент, из чего делаю вывод, что при клике по кнопке с классом .btn-more изначально загружаются скрипты, а уже потом подгружается контент с помощью ajax, с которым подгруженные скрипты уже не работают. Помогите понять как решить проблему
    Володя
    11 июня 2017, 14:39
    +1
    нужно инициализировать скрипты слайдеров и галерей после загрузки контента. поищите тут уже где то были примеры.
    Владислав
    12 июня 2017, 05:38
    0
    да… Я это и пытаюсь сделать последние дня два
    В примере описанном здесь используется как раз:
    pdoPage.callbacks['after'] = function(config, response) { };
    Но таким образом не выходит сделать. Если для теста вызвать alert, то после клика по кнопке сперва появляется окно alert'а, а уже потом подгружается контент. Мне кажется, что со скриптами происходит тоже самое. Может мне и удается их инициализировать еще раз, вот только это происходит до загрузки контента ajax'ом, а значит на подгруженный контент они уже не работают. Хотя может и ошибаюсь.

    Но получилось заставить работать галерею с помощью ajaxStop. Правда тут возникла другая сложность — после подгрузки контента ajax'ом функция, которая была отработана во время изначальной загрузки страницы продолжает работать и после загрузки контента ajax'ом, при этом дублируя результаты отработки после каждого нажатия на кнопку btn-more. Пока не могу понять как обнулить результаты отработки функции и одновременно снова загрузить скрипт.

    $(function(){
            var $gallery = $('.rows a').simpleLightbox();
    
            $gallery.on('show.simplelightbox', function(){
                console.log('Requested for showing');
            })
            .on('shown.simplelightbox', function(){
                console.log('Shown');
            })
            .on('close.simplelightbox', function(){
                console.log('Requested for closing');
            })
            .on('closed.simplelightbox', function(){
                console.log('Closed');
            })
            .on('change.simplelightbox', function(){
                console.log('Requested for change');
            })
            .on('next.simplelightbox', function(){
                console.log('Requested for next');
            })
            .on('prev.simplelightbox', function(){
                console.log('Requested for prev');
            })
            .on('nextImageLoaded.simplelightbox', function(){
                console.log('Next image loaded');
            })
            .on('prevImageLoaded.simplelightbox', function(){
                console.log('Prev image loaded');
            })
            .on('changed.simplelightbox', function(){
                console.log('Image changed');
            })
            .on('nextDone.simplelightbox', function(){
                console.log('Image changed to next');
            })
            .on('prevDone.simplelightbox', function(){
                console.log('Image changed to prev');
            })
            .on('error.simplelightbox', function(e){
                console.log('No image found, go to the next/prev');
                console.log(e);
            });
            
        });
        
        $(document).ajaxStop(function() {
    
        var $gallery = $('.rows a').simpleLightbox();
    
      });
      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
      29