pdoPage и скрипт Lightgallery
        Есть галерея с видеороликами — каждый ролик — отдельный документ modx
при нажатии на постер — видео открывается в отдельном окне с помощью Lightgallery
при использовании ajax пагинации — при переходе на следующую страницу скрипт Lightgallery работать перестает — при клике на постер видео не открывается во всплывающем окне
В чем причина?
Вызов pdoPage
test.hograllyminsk.com/gallery/
раздел Видео
    
    
                                                                                
            при нажатии на постер — видео открывается в отдельном окне с помощью 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/
раздел Видео
Комментарии: 29
                Если не ошибаюсь то нужно использовать callbacks after, чтобы инициализировать Lightgallery после перехода на другую страницу:
                    pdoPage.callbacks['after'] = function(config, response) {
    console.log('Конфиг после загрузки!', config);
    console.log('Ответ от сервера!', response);
}            
                это я тоже предположил
но как именно туда вставить инициализацию?
и что делать с основной инициализацией
она выглядит так
я и так и так ковырял и не вышло
                    но как именно туда вставить инициализацию?
и что делать с основной инициализацией
она выглядит так
<script type="text/javascript">
 $(document).ready(function(){
 $('#video-thumbnails').lightGallery({
    loadYoutubeThumbnail: true,
    youtubeThumbSize: 'default',
    loadVimeoThumbnail: true,
    vimeoThumbSize: 'thumbnail_medium'
});	
  });
 </script>если не сложно подскажитея и так и так ковырял и не вышло
                подскажет кто?            
                    
                Может, не делать страницами pdoPage, а использовать плагин pager указанной галереи?
Да и отвлеченный вариант он хорош разве что для философских симпозиумов, а я вот не могу ничего сказать, пока конкретный пример не посмотрю. Городить же собственный пример ради чьего-то интереса — увы, есть множество других интересных вещей в моей жизни. Думаю, у других такая же ерунда.
                    Да и отвлеченный вариант он хорош разве что для философских симпозиумов, а я вот не могу ничего сказать, пока конкретный пример не посмотрю. Городить же собственный пример ради чьего-то интереса — увы, есть множество других интересных вещей в моей жизни. Думаю, у других такая же ерунда.
                что за плагин такой? дай ссылочку
я что то не нашел
а конкретный пример я же выше написал на свой случай где смотреть
                    я что то не нашел
а конкретный пример я же выше написал на свой случай где смотреть
                За пример извини — не проснулся еще, видимо.
Про Pager прямо на странице документации sachinchoolur.github.io/lightGallery/docs/api.html#lg-pager
                    Про Pager прямо на странице документации sachinchoolur.github.io/lightGallery/docs/api.html#lg-pager
                Причем, зырь, он у тебя включен:
            
                    
            
                вижу. но прочитав совершенно не понял как его применить            
                    
                Вобщем придумал я так
Совместил pdoPage и Rowboat
а у галереи Asset Manager их две
ну да ладно
вытащил параметр asset_id из ass_page_assets
чанк для формирования вывода фото с увеличением выглядит так
только надо конкретно указывать
&where=`{«page_id»:10}` — откуда брать фото
теперь бы побороть отключение работы увеличителя картинок Lightgallery после перехода по страницам
ajax пагинация отрубает инициализацию Lightgallery
тут сказали надо использовать callback функцию pdoPage
но я не могу понять как в нее вставить заново эту инициализацию, в каком месте, и что делать с основным вызовом Lightgallery
если подскажете как и что вставлять для этого — будет просто здорово)
и галерея с названием ass будет не такой уж задницей)
                    Совместил 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 будет не такой уж задницей)
                Да, не пугает даже префикс _ass))) На что только люди не пойдут, лишь бы нормальную галерею не покупать!))))
Шутка. Поковырять тоже интересно, как самоцель.
                    Шутка. Поковырять тоже интересно, как самоцель.
                а что с отключением jquery при аякс пагинации?)
помогите забить последний гвоздь в эту задницу)
            
                    помогите забить последний гвоздь в эту задницу)
                О, увидел и понял что мне как раз сейчас именно этот (Lightgallery) плагин галереи понадобится Vimeo крутить в лайтбоксе. 
Ща будем посмотреть подробнее, там и пагинация будет нужна)…
                    Ща будем посмотреть подробнее, там и пагинация будет нужна)…
                надеюсь и жду!!!)            
                    
                Насколько я понял, достаточно подключить (у тебя уже подключен) и в вызове активировать:
                    $('#video-thumbnails').lightGallery({
    loadYoutubeThumbnail: true,
    youtubeThumbSize: 'default',
    loadVimeoThumbnail: true,
    pager: true,
    vimeoThumbSize: 'thumbnail_medium'
});            
                Виталий! Это не то что мне нужно) Pager — это просто точки для навигации по элементам галереи — они появляются при открытие модального окна в самом низу этого окна)
А мне нужна пагинация на самой странице с миниатюрами фоток или видео
собственно саму пагинацию я уже сделал с pdoPage
осталось выяснить почему режим ajax для нее отрубает lightgallery при переходе по страницам и как это пофиксить
                    А мне нужна пагинация на самой странице с миниатюрами фоток или видео
собственно саму пагинацию я уже сделал с pdoPage
осталось выяснить почему режим ajax для нее отрубает lightgallery при переходе по страницам и как это пофиксить
                Нужно читать документацию в первую очередь, какие методы есть у скрипта. 
Вот решение:
Добровольное пожертвование приветствуется =))
                    Вот решение:
<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>Добровольное пожертвование приветствуется =))
                не вопрос. но не работает пока и так)
все скопировал к себе — результат прежний
еще и картинки постеров пропадают вдобавок
            
                    все скопировал к себе — результат прежний
еще и картинки постеров пропадают вдобавок
                Доступы можете прислать в личку? Должно всё работать, проверено. Где то у вас не так настроено что то.            
                    
                отправил            
                    
                Попробуйте ещё раз, не приходит что то.            
                    
                я через форму в личке отправлял
давай так свой майл тогда — раз там проблемы
                    давай так свой майл тогда — раз там проблемы
                Странно, тогда сюда — mail@mswork.ru            
                    
                дошло?            
                    
                Да, всё пришло, сейчас разберёмся, отпишу на почту тогда            
                    
                ок            
                    
                Всё готово, отписал на почту =)            
                    
                Приветствую! Мучаюсь с проблемой… надеюсь на помощь
При ajax-загрузке контента с помощью pdopage перестают работать скрипты слайдеров и галерей, потому что они работают только с контентом, который был загружен во время загрузки страницы. Перепробовал уже
$('body').on( 'click', '.btn-more', function() { });
и
pdoPage.callbacks['after'] = function(config, response) { };
и
$(document).ajaxSuccess(function() { };
ничто не отрабатывает правильно. При вызове обычного alert, изначально появляется модальное окно, а уже потом подгружается контент, из чего делаю вывод, что при клике по кнопке с классом .btn-more изначально загружаются скрипты, а уже потом подгружается контент с помощью ajax, с которым подгруженные скрипты уже не работают. Помогите понять как решить проблему
                    При ajax-загрузке контента с помощью pdopage перестают работать скрипты слайдеров и галерей, потому что они работают только с контентом, который был загружен во время загрузки страницы. Перепробовал уже
$('body').on( 'click', '.btn-more', function() { });
и
pdoPage.callbacks['after'] = function(config, response) { };
и
$(document).ajaxSuccess(function() { };
ничто не отрабатывает правильно. При вызове обычного alert, изначально появляется модальное окно, а уже потом подгружается контент, из чего делаю вывод, что при клике по кнопке с классом .btn-more изначально загружаются скрипты, а уже потом подгружается контент с помощью ajax, с которым подгруженные скрипты уже не работают. Помогите понять как решить проблему
                нужно инициализировать скрипты слайдеров и галерей после загрузки контента. поищите тут уже где то были примеры.            
                    
                да… Я это и пытаюсь сделать последние дня два
В примере описанном здесь используется как раз:
pdoPage.callbacks['after'] = function(config, response) { };
Но таким образом не выходит сделать. Если для теста вызвать alert, то после клика по кнопке сперва появляется окно alert'а, а уже потом подгружается контент. Мне кажется, что со скриптами происходит тоже самое. Может мне и удается их инициализировать еще раз, вот только это происходит до загрузки контента ajax'ом, а значит на подгруженный контент они уже не работают. Хотя может и ошибаюсь.
Но получилось заставить работать галерею с помощью ajaxStop. Правда тут возникла другая сложность — после подгрузки контента ajax'ом функция, которая была отработана во время изначальной загрузки страницы продолжает работать и после загрузки контента ajax'ом, при этом дублируя результаты отработки после каждого нажатия на кнопку btn-more. Пока не могу понять как обнулить результаты отработки функции и одновременно снова загрузить скрипт.
                    В примере описанном здесь используется как раз:
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();
  });            
                            Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.