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();
});
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.