Textpattern CMS

#1 2021-01-12 13:19:35

Gallex

Member

Registered: 2006-10-08

Posts: 1,289

fancybox image gallery

hi!

i would like to create gallery like here
first image big one, next images thumbnails.

but i don’t get first image to work. my code is below and result is here. it just duplicates the gallery. could anybody help me here?

<txp:if_article_image>
<txp:images auto_detect="article" wraptag="ul" break="li" class="article-album">

  <a data-fancybox-trigger="preview" href="javascript:;">
    <txp:thumbnail />
  </a>

<a href="<txp:image_url />" data-fancybox="preview" data-caption='<txp:image_info type="caption" />'>
<txp:thumbnail />
</a>
<span class="thumb-alt"><txp:image_info type="alt" /></span>

</txp:images>
</txp:if_article_image>

#2 2021-01-17 08:46:33

Gallex

Member

Registered: 2006-10-08

Posts: 1,289

Re: fancybox image gallery

found a solution:

<txp:if_article_image>
<txp:images auto_detect="article" wraptag="ul" break="" class="article-album">

    <txp:if_first_image>
        <li class="latest">
         <a href="<txp:image_url />" data-fancybox="preview" data-caption='<txp:image_info type="caption" />'>
          <txp:image />
         </a>
        </li>
    <txp:else />
        <li>
          <a href="<txp:image_url />" data-fancybox="preview" data-caption='<txp:image_info type="caption" />'>
           <txp:thumbnail />
          </a>
         <span class="thumb-alt"><txp:image_info type="alt" /></span>
        </li>
    </txp:if_first_image>

</txp:images>
</txp:if_article_image>

CSS:

.article-album li {
padding-right: 2px;
padding-bottom: 2px;
text-align:center;
width:25%;
display:block;
overflow: hidden;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}

.article-album li:first-child {
padding-right: 0;
padding-bottom: 2px;
width:100%;
}

does anybody have more compact solution to offer?