Как открыть альбом gallery при клике на обложку?

Здравствуйте!

Подскажите пожалуйста как сделать так, чтобы при клике на обложку альбома, сам альбом открывался в fancybox/colorbox/lightbox, а не открывался на новой странице.
Lori
02 мая 2021, 10:32
modx.pro
899
0

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

Артур Шевченко
02 мая 2021, 20:38
0
Если делаешь на fancybox, то так
<a href="path/to/cover" data-fancybox="gallery">
    <img src="path/to/image">
</a>
<a href="path/to/image"  data-fancybox="gallery"></a>
<a href="path/to/image2"  data-fancybox="gallery"></a>
<a href="path/to/imag3"  data-fancybox="gallery"></a>
    Lori
    02 мая 2021, 22:06
    0
    уже сделал спасибо)
    biper
    24 июля 2023, 10:07
    0
    Проект tsknnmgc.beget.tech

    Modx Gallery. Блок на главной — «ГАЛЕРЕЯ НАШИХ РАБОТ» содержит некоторое количество альбомов, внутри которых фотографии. Если выводить стандартным чанком «galAlbumRowWithCoverTpl», то выводятся заглавные картинки альбомов.

    А как сделать при клике на альбом, чтобы открывалась галерея с фотографиями (содержимым альбома)…? не понимаю… Сейчас ссылка в чанке на это выглядит так..

    <a href="[[+url:is=``:then=`[[+image]]`:else=`[[+url]]`]]" [[+link_attributes]]>
            [[+image:notempty=`<img src="[[+image]]" [[+cls:notempty=`class="[[+cls]]"`]] alt="[[+title]]" />`]]
        </a>
    Как поменять ее в нужную сторону ?
      Алексей
      24 июля 2023, 10:43
      0
      Добрый день. Посмотрите, вот так надо? Галерея
        biper
        24 июля 2023, 10:49
        0
        так точно… :) как?
          Алексей
          24 июля 2023, 11:05
          0
          Вызов
          [[!GalleryAlbums?
          &toPlaceholder=`GalleryAlbums`
          &limit=`5`
          &albumCoverSort=`rank`
          &albumCoverSortDir=`DESC`
          &prominentOnly=`1`
          &rowTpl=`imageCategory`
          &thumbWidth=`360`
          &thumbHeight=`270`
          ]]
          
          [[!Gallery?
          &toPlaceholder=`Gallery`
          &checkForRequestTagVar=`1`
          &useCss=`0`
          &containerTpl=`GalleryAlbumTpl`
          &thumbTpl=`imageIndex`
          &thumbWidth=`360`
          &thumbHeight=`270`
          &imageWidth=`1024`
          &imageHeight=`768`
          ]]
          
          [[+Gallery:isnot=``:then=`<p class="uk-margin uk-text-center"><a  onclick="javascript:history.back(); return false;"><< Вернуться к общему каталогу</a></p><div class="uk-child-width-1-4@m uk-child-width-1-1" uk-grid uk-lightbox>
          [[+Gallery]]</div><p class="uk-margin uk-text-center"><a  onclick="javascript:history.back(); return false;"><< Вернуться к общему каталогу</a></p>`:else=`<div class="uk-child-width-1-3@m uk-child-width-1-1" uk-grid>[[+GalleryAlbums]]</div>`]]
          imageCategory
          <a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]" data-caption="[[+name]]" title="[[+name]]">
              <div>
                  <div class="uk-card uk-card-default">
                      <div class="uk-card-media-top uk-inline uk-transition-toggle">
                          <img data-src="[[+image]]" width="360" height="270" alt="[[+name]]" uk-img>
                          <div class="uk-transition-fade uk-position-cover uk-overlay uk-overlay-primary uk-flex uk-flex-center uk-flex-middle uk-light"></div>
                           <div class="uk-overlay uk-overlay-default uk-position-bottom">
                               <p>[[+name]]</p>
                           </div>
                      </div>
                  </div>
              </div>
          </a>
          imageIndex
          <a href="[[+url:is=``:then=`[[+image]]`:else=`[[+url]]`]]" data-caption="[[+name]]" title="[[+name]]">
              <div>
                  <div class="uk-card uk-card-default">
                      <div class="uk-card-media-top uk-inline uk-transition-toggle">
                          <img data-src="[[+thumbnail]]" width="360" height="270" alt="[[+name]]" uk-img>
                          <div class="uk-transition-fade uk-position-cover uk-overlay uk-overlay-primary uk-flex uk-flex-center uk-flex-middle uk-light"><span class="uk-icon-button" uk-icon="icon: plus-circle; ratio: 2"></span></div>
                           <div class="uk-overlay uk-overlay-default uk-position-bottom">
                               <p>[[+name]]</p>
                           </div>
                      </div>
                  </div>
              </div>
          </a>
            biper
            24 июля 2023, 11:15
            0
            Спасибо, попробую :)
      Dan
      Dan
      24 июля 2023, 10:49
      0
      Открываться должна на новой странице или в модальном окне?
        biper
        24 июля 2023, 10:50
        0
        в модалке предпочтительно
          Dan
          Dan
          24 июля 2023, 11:08
          1
          0
          В модалке я делаю ajax-подгрузкой галерею. Какой плагин модалки используете (fanbybox, lightgallery, magnific)?
            biper
            24 июля 2023, 11:17
            0
            fanсybox
              biper
              25 июля 2023, 09:30
              0
              fancyBox3
                Dan
                Dan
                25 июля 2023, 12:40
                1
                0
                Если не хотите использовать ajax, то можно сделать так немного закостылить:
                1) Немного правите ваш текущий чанк galAlbumRowWithCoverTpl
                [[!Gallery?
                    &album=`[[+id]]`
                    &toPlaceholder=`photos`
                    &thumbTpl=`tpl.gallery.image`
                ]]
                <a href="[[+url:is=``:then=`[[+image]]`:else=`[[+url]]`]]" [[+link_attributes]] class="gallery-preview" data-photos="[[+photos:commaSeparate]]">
                    [[+image:notempty=`<img src="[[+image]]" [[+cls:notempty=`class="[[+cls]]"`]] alt="[[+title]]" />`]]
                </a>
                2) Создаете чанк tpl.gallery.image
                [[+image_absolute]],
                3) Создаете сниппет commaSeparate
                <?php
                return rtrim($input, ',');
                4) Пишете js-код:
                $(document).ready(function() {
                   $('.gallery-preview').click(function(e) {
                        e.preventDefault();
                        let photos = [];
                
                        if ($(this).attr('data-photos') && $(this).attr('data-photos') != '') {
                            let list = $(this).attr('data-photos').split(',');
                            $.each(list,function(i){
                                photos.push({href: list[i]});
                            });
                        }        
                        
                        $.fancybox.open(photos);
                   });
                });
                  biper
                  25 июля 2023, 13:04
                  0
                  спасибо, попробуую :) несколько омрачает что галерея находится в карусели, видимо оттого не совсем получается… постараюсь разобраться
                    Dan
                    Dan
                    25 июля 2023, 13:07
                    0
                    В карусели или нет — это никак не влияет. Я бы конечно сделал ajax-подгрузку, но там писанины больше.
                      biper
                      25 июля 2023, 14:20
                      0
                      ни фига…: (
                      логику вроде понимаю… а сам вызов не нужно ничего менять?
                      <div class="container-fluid">
                           <hh>ГАЛЕРЕЯ наших работ</hh><hr>
                               <div class="row" style="margin: 0;">
                                  
                      [[!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &limit=`0` &albumCoverSort=`rank` &prominentOnly=`1`
                      &rowTpl=`galAlbumRowWithCoverTpl`&thumbWidth=`400` &thumbHeight=`266` &thumbTpl=`GalItemThumb1` &imageWidth=`900` &imageHeight=`900`]]
                      
                      [[!Gallery? &album=`[[*galery_name]]` &limit=`0` &checkForRequestTagVar=`1`&sortby=`{"publishedon":"ASC"}`  &toPlaceholder=`Gallery` 
                      &useCss=`0` &containerTpl=`GalleryAlbumTpl` itemCls=`carousel-item` activeCls=`carousel-item active` &thumbWidth=`400` &thumbHeight=`266` 
                      &thumbTpl=`GalItemThumb1` &imageWidth=`900` &imageHeight=`900`]]
                      
                      [[+Gallery:isnot=``:then=`<div class="carousel-inner gallery_pic">[[+Gallery]]</div>`:else=`<ul class="carousel-inner gallery_pic">
                      
                      [[+GalleryAlbums]]</ul>`]]
                                 
                               </div>
                              <p class="con">
                               </p>
                            </div>
                        biper
                        25 июля 2023, 14:36
                        0
                        ибо вроде как масло масляное получается в нем…
                          Dan
                          Dan
                          25 июля 2023, 17:01
                          0
                          А что именно не работает? Ошибки в консоли есть? По клику что происходит? Если открыть исходный код на сайте, там изображения есть в data-photos у ссылок?
                            biper
                            12 августа 2023, 13:09
                            0
                            Прошу пардону… у компа сейчас бываю эпизодически… короче вот что происходит -:(живьем на tsknnmgc.beget.tech)

                            Вызов галереи в блоке на странице********************

                            <div class="container-fluid">
                                 <hh>ГАЛЕРЕЯ наших работ</hh><hr>
                                     <div class="row" style="margin: 0;">
                                        
                            [[!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &limit=`0` &albumCoverSort=`rank` &prominentOnly=`1` &rowTpl=`galAlbumRowWithCoverTpl`&thumbWidth=`400` &thumbHeight=`266`]]
                            
                            [[!Gallery? &album=`[[*galery_name]]` &limit=`0` &checkForRequestTagVar=`1`&sortby=`{"publishedon":"ASC"}`  &toPlaceholder=`Gallery` 
                            &useCss=`0` &containerTpl=`GalleryAlbumTpl1` itemCls=`carousel-item` activeCls=`carousel-item active` ]]
                            
                            [[+Gallery:isnot=``:then=`<div class="carousel-inner gallery_pic">[[+Gallery]]</div>`:else=`<ul class="carousel-inner gallery_pic">
                            
                            [[+GalleryAlbums]]</ul>`]]
                                       
                                     </div>        
                            
                                    <p class="con"> </p>         
                            
                                  </div>

                            Выглядит результат — выводятся обложки альбомов и их названия… тут все гут… При клике по обложке альбома открывается в модалке картинка с этой же картинкой, что и на обложке… а должна открываться галерея – т.е. просмотр всех картинок, что вложены в альбом. FancyBox подключен и ранее (когда была простая галерея) уже проверял – все работало… Что не так… не понимаю ☹



                            galAlbumRowWithCoverTpl

                            <li class="col-lg-4 col-6 thumb pic_gal"> <p style="text-align: center; color:white;">[[+name]] ([[+total]])</p>
                            
                            [[!Gallery? &album=`[[+id]]`&toPlaceholder=`photos`&thumbTpl=`tpl.gallery.image`]]
                                <a href="[[+url:is=``:then=`[[+image]]`:else=`[[+url]]`]]" [[+link_attributes]] class="gallery-preview" data-photos="[[+photos:commaSeparate]]">
                                    [[+image:notempty=`<img src="[[+image]]" [[+cls:notempty=`class="[[+cls]] "`]] alt="[[+title]]" />`]]
                                </a>
                            </li>
                            GalItemThumb

                            <div class="[[+cls]]">
                                <a href="[[+linkToImage:if=`[[+linkToImage]]`:is=`1`:then=`[[+image_absolute]]`:else=`[[~[[*id]]?
                                        &[[+imageGetParam]]=`[[+id]]`
                                        &[[+albumRequestVar]]=`[[+album]]`
                                        &[[+tagRequestVar]]=`[[+tag]]` ]]`]]" title="[[+name]]" [[+link_attributes]]>
                                    <img class="[[+imgCls]]" src="[[+thumbnail]]" alt="[[+name]]" [[+image_attributes]] />
                                </a>
                            </div>
                            GalleryAlbumTpl1

                            <div class="clearfix mosaicflow carousel-item"> 
                             [[+thumbnails]]
                            </div>
                            Прошу прощения за столько подробностей, но чейт не пойму, что делаю не так
                            Dan
                            Dan
                            13 августа 2023, 09:34
                            0
                            На странице jquery не подключен. Пользуйтесь консолью, там же написана ошибка
                            biper
                            13 августа 2023, 11:09
                            0
                            ничего не понимаю… все вроде подключал…
                            вот сейчас подставил скрипт прямо на странице…

                            <script
                              src="https://code.jquery.com/jquery-3.7.0.min.js"
                              integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
                              crossorigin="anonymous"></script>


                            принудительно убил весь кеш, обновил страницу… консоль ошибки не выдает…

                            проверил скриптом подключение jquery — выдает версию 3.7.0// т.е. все гут… но все как и прежде… не пашет…

                            не понимаю… где вообще копать (GalItemThumb?) чтобы при клике ссылка открывала модалку с картинками альбома… синапсы попутались, а сегодня опять исчезну вечером… вернусь — буду пытаться снова лбом в эту стену. Вам спасибо за сочувствие и помощь :)
                            Dan
                            Dan
                            13 августа 2023, 13:03
                            0
                            а js код где, отвечающий за открытие модалки?
                            biper
                            13 августа 2023, 15:10
                            0
                            так
                            <script type="module"> import { Fancybox } from "https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.esm.js";</script>
                            жеж вроде как… Или я что не так говою?
                            Dan
                            Dan
                            13 августа 2023, 15:42
                            0
                            Не скрипт facncybox, а скрипт слушатель клика по ссылке, чтобы фотки открывались в fancybox в виде галереи? Я же расписал в своем ответе (4 пункт)
                            biper
                            14 августа 2023, 08:00
                            0
                            Разобрался… все оказалось проще… потерялась data-fancybox=«gallery» в «galAlbumRowWithCoverTpl»… :)

                            Остался последний вопрос — сейчас в модалке при клике отображаются не только фотографии одного альбома, а вообще все подряд… я так понимаю это нужно тоже в «galAlbumRowWithCoverTpl» настраивать параметры для ссылки ?!
                            Dan
                            Dan
                            14 августа 2023, 09:20
                            0
                            Так, если вы все сделали, как я написал, то должно было работать и без data-fancybox и тогда каждый бы открывался в своей галерее, а не все в одной
                            biper
                            14 августа 2023, 10:17
                            0
                            сделал все по вашей инструкции
                            [[!Gallery?
                                &album=`[[+id]]`
                                &toPlaceholder=`photos`
                                &thumbTpl=`tpl.gallery.image`
                            ]]
                            <a 
                                
                                data-fancybox="gallery"
                                
                                 href="[[+url:is=``:then=`[[+image]]`:else=`[[+url]]`]]" [[+link_attributes]] class="gallery-preview" data-photos="[[+photos:commaSeparate]]">
                                [[+image:notempty=`<img src="[[+image]]" [[+cls:notempty=`class="[[+cls]]"`]] alt="[[+title]]" />`]]
                            </a>
                            </li>
                            при клике, если вот как в инструкции, то отображается картинка с обложкой альбома, без всяких стрелок управляющих и пр… если добавляю в код ссылки data-fancybox=«gallery»… то все отображаются штатно, но при этом обложки всех альбомов, а не фото в альбоме, как того желалось бы… :) Боюсь, я утомил :( не только себя
                            Dan
                            Dan
                            15 августа 2023, 06:44
                            0
                            Странно, у меня и без data-атрибута работает. Ну тогда укажите вместо data-fancybox=«gallery»,
                            data-fancybox="gallery-[[+album]]"
                            biper
                            15 августа 2023, 12:28
                            0
                            нифига...

                            я вот вижу, что при клике открывается теперь путь в виде «tsknnmgc.beget.tech/#gallery--1», далее… пролистываются картинки «tsknnmgc.beget.tech/#gallery--2»… и так далее..., т.е. суть действий вроде как правильная… но [[+album]] указывает на альбомы, а требуется еще и картинку внутри альбома указать исчо типа `[[+image]]` или как?.. Может глупо рассуждать так… :) но иначе не понять. Пробовал методом слепого котенка :) но ить это не метод… плаваю я в этом ибо… самоучкой все приходится
                            biper
                            15 августа 2023, 13:40
                            0
                            видимо, можно подставить еще какие то плейсхолдеры, чтобы сформировать путь к картинке ?! Или глупость изволю…? :)
                            Константин Ильин
                            15 августа 2023, 13:41
                            0
                            Так приведите код к примеру как в самом первом комментарии.
                            Это код одного(!) Альбома, т.е. одной группы изображений:
                            <li>
                            <a href="изображение" data-fancybox="gallery-[[+album]]">
                                <img src="изображениеМини">
                            </a>
                            <a href="изображение2"  class="hidden" data-fancybox="gallery-[[+album]]"></a>
                            <a href="изображение3"  class="hidden"  data-fancybox="gallery-[[+album]]"></a>
                            <a href="изображение4"  class="hidden"  data-fancybox="gallery-[[+album]]"></a>
                            </li>
                            biper
                            15 августа 2023, 13:54
                            0
                            <li class="col-lg-4 col-6 thumb pic_gal"> <p style="text-align: center; color:white;">[[+name]] ([[+total]])</p>
                            
                            [[!Gallery? &album=`[[+id]]`&toPlaceholder=`photos`&thumbTpl=`tpl.gallery.image` ]]
                            
                                <a  data-fancybox="gallery-[[+album]]"   href="[[+url:is=``:then=`[[+image]]`:else=`[[+url]]`]]" [[+link_attributes]] 
                                class="gallery-preview" data-photos="[[+photos:commaSeparate]]">
                                    [[+image:notempty=`<img src="[[+image]]" [[+cls:notempty=`class="[[+cls]] "`]] alt="[[+title]]" />`]]
                                </a>
                                
                            </li>
                            и что не так та?
                            Константин Ильин
                            15 августа 2023, 14:31
                            0
                            Совсем не видно разницы?
                            то что у вас один тег A, а в примере на каждую фотографию альбома свой тег A

                            т.е. не в data-photos надо передавать, а вывести [[+photos]] как отдельные теги A.

                            может я не знаю, но data-photos вроде такого атрибута у fancybox нет.
                            Dan
                            Dan
                            15 августа 2023, 14:36
                            0
                            У него задача вывести обложки альбомов и по клику уже вывести в fancybox галерею одного альбома. Не стал ему предлагать ajax-подгрузку, ибо если он такой вопрос задал, то вряд ли справится. Поэтому предложил костыльное решение — вывести url-ы всех фото одного альбома в атрибут data-photos. По клику на обложку альбома должен инициализироваться fancybox с переданными в него url-ами фото.
                            У себя протестил — работает без проблем, автор видимо где-то ошибся
                            Константин Ильин
                            15 августа 2023, 14:42
                            0
                            Понимаю. В целом я тоже решение предложил, без кода всякого.
                            смысл такой что в data-fancybox должно быть одно название группы фото,
                            т.е. data-fancybox=«gallery-123» у всех ссылок одного альбома.

                            для превью мы выводим ссылку с изображением альбома и с атрибутом data-fancybox, а другие изображение как «пустые» скрытые ссылки но с таким же data-fancybox
                            и все работает. Не раз такое делал.
                            <li class="col-lg-4 col-6 thumb pic_gal"> <p style="text-align: center; color:white;">[[+name]] ([[+total]])</p>
                                <a  data-fancybox="gallery-[[+id]]"   href="[[+url:is=``:then=`[[+image]]`:else=`[[+url]]`]]" [[+link_attributes]] 
                                class="gallery-preview">
                                    [[+image:notempty=`<img src="[[+image]]" [[+cls:notempty=`class="[[+cls]] "`]] alt="[[+title]]" />`]]
                                </a>
                                [[!Gallery? &album=`[[+id]]` &thumbTpl=`tpl.gallery.image` ]]
                                
                            </li>
                            Не знаю что у вас там в tpl.gallery.image но самое галвное в нем сделать атрибут data-fancybox=«gallery-[[+album]]» который должен быть похож как в основном чанке и как тег А сделать с сылкой на изображение. Возможно здесь не сработает album, точно не знаю какой там плейсхолдер указание id альбома
                            <a href="изображение4"  class="hidden"  data-fancybox="gallery-[[+album]]"></a>
                            biper
                            16 августа 2023, 08:01
                            0
                            простите нубского падавана, ибо я вот опять на неопределенное время пропаду из города через час/два… потому задам вопрос на вырост себе и на момент появления снова: я вот пытаюсь понять, как сделать нечто, чего основ языка не знаю. Имеет момент сложностей перевода… Может просто подскажете что пока в разъездах почитать на эту тему, ибо напрягать вас своими глупостями как-то и неэтично вроде :)
                            Константин Ильин
                            16 августа 2023, 09:51
                            0
                            Основной чанк, готовый код я дал выше, где вызывается галерея, просто копировать.

                            Нужно посмотреть tpl.gallery.image и его поправить, но код я тоже скинул в целом, остается только подставить значения

                            Читать по этому поводу особо нечего, просто нужна простая логика.

                            вы вызываете GalleryAlbums с чанком galAlbumRowWithCoverTpl
                            в этом чанке первая ссылка a data-fancybox="gallery-[[+id]]">

                            далее в этом чанке вызываете альбом через
                            [[!Gallery? &album=`[[+id]]` &thumbTpl=`tpl.gallery.image` ]]

                            Внутри tpl.gallery.image нужно сделать ссылки на изображения
                            a href=«изображение4» class=«hidden» data-fancybox="gallery-[[+album]]">
        Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
        38