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

Прошу пардону… у компа сейчас бываю эпизодически… короче вот что происходит -:(живьем на 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>

Прошу прощения за столько подробностей, но чейт не пойму, что делаю не так

На странице jquery не подключен. Пользуйтесь консолью, там же написана ошибка

ничего не понимаю… все вроде подключал…
вот сейчас подставил скрипт прямо на странице…

<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?) чтобы при клике ссылка открывала модалку с картинками альбома… синапсы попутались, а сегодня опять исчезну вечером… вернусь — буду пытаться снова лбом в эту стену. Вам спасибо за сочувствие и помощь :)

а js код где, отвечающий за открытие модалки?

так

<script type="module"> import { Fancybox } from "https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.esm.js";</script>

жеж вроде как… Или я что не так говою?

Не скрипт facncybox, а скрипт слушатель клика по ссылке, чтобы фотки открывались в fancybox в виде галереи? Я же расписал в своем ответе (4 пункт)

Разобрался… все оказалось проще… потерялась data-fancybox=«gallery» в «galAlbumRowWithCoverTpl»… :)

Остался последний вопрос — сейчас в модалке при клике отображаются не только фотографии одного альбома, а вообще все подряд… я так понимаю это нужно тоже в «galAlbumRowWithCoverTpl» настраивать параметры для ссылки ?!

Так, если вы все сделали, как я написал, то должно было работать и без data-fancybox и тогда каждый бы открывался в своей галерее, а не все в одной

сделал все по вашей инструкции

[[!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»… то все отображаются штатно, но при этом обложки всех альбомов, а не фото в альбоме, как того желалось бы… :) Боюсь, я утомил :( не только себя

Странно, у меня и без data-атрибута работает. Ну тогда укажите вместо data-fancybox=«gallery»,

data-fancybox="gallery-[[+album]]"

нифига...

я вот вижу, что при клике открывается теперь путь в виде «tsknnmgc.beget.tech/#gallery--1», далее… пролистываются картинки «tsknnmgc.beget.tech/#gallery--2»… и так далее..., т.е. суть действий вроде как правильная… но [[+album]] указывает на альбомы, а требуется еще и картинку внутри альбома указать исчо типа `[[+image]]` или как?.. Может глупо рассуждать так… :) но иначе не понять. Пробовал методом слепого котенка :) но ить это не метод… плаваю я в этом ибо… самоучкой все приходится

видимо, можно подставить еще какие то плейсхолдеры, чтобы сформировать путь к картинке ?! Или глупость изволю…? :)

Так приведите код к примеру как в самом первом комментарии.
Это код одного(!) Альбома, т.е. одной группы изображений:

<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>

<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>

и что не так та?

Совсем не видно разницы?
то что у вас один тег A, а в примере на каждую фотографию альбома свой тег A

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

может я не знаю, но data-photos вроде такого атрибута у fancybox нет.

У него задача вывести обложки альбомов и по клику уже вывести в fancybox галерею одного альбома. Не стал ему предлагать ajax-подгрузку, ибо если он такой вопрос задал, то вряд ли справится. Поэтому предложил костыльное решение — вывести url-ы всех фото одного альбома в атрибут data-photos. По клику на обложку альбома должен инициализироваться fancybox с переданными в него url-ами фото.
У себя протестил — работает без проблем, автор видимо где-то ошибся

Понимаю. В целом я тоже решение предложил, без кода всякого.
смысл такой что в 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>

простите нубского падавана, ибо я вот опять на неопределенное время пропаду из города через час/два… потому задам вопрос на вырост себе и на момент появления снова: я вот пытаюсь понять, как сделать нечто, чего основ языка не знаю. Имеет момент сложностей перевода… Может просто подскажете что пока в разъездах почитать на эту тему, ибо напрягать вас своими глупостями как-то и неэтично вроде :)

Основной чанк, готовый код я дал выше, где вызывается галерея, просто копировать.

Нужно посмотреть 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]]">