I have hard time wrapping my head around this. I am using Couch Gallery with lightbox called LightGallery(my first time using Couch gallery functionality).

I have everything setup properly with dynamic folders, etc. It should all be presented on one page as grid items.

Code: Select all

<cms:template title="Galerije" clonable="1" dynamic_folders="1" gallery="1">

    <cms:editable name="gg_image" label="Slika" desc="dodaj sliku ovdje" width="1800" show_preview="1"
        preview_height="200" type="image" />

    <cms:editable name="gg_thumb" assoc_field="gg_image" label="Slika - Thumbnail" desc="thumbnail za sliku" width="200"
        height="200" type="thumbnail" show_preview="1" />

    <cms:editable name="grid_thumb" assoc_field="gg_image" label="Thumbnail za pocetni prikaz" width="320" height="320"
        show_preview="1" preview_width="140" type="thumbnail" />

</cms:template>

This is my markup for displaying the gallery. Each gallery set gets one image to be shown initially, then when clicked on it the rest of the images belonging to that gallery set are displayed along with their thumbnails. Also, those images are initially set to display:none.

Code: Select all

   <div column="3">
         <div class="gallery-listing">
        <!-- This should be shown initially. It should be first image from the set -->
         <a class="gallery-item" href="<cms:show gg_image/>"><img src="<cms:show grid_thumb/>"alt=""></a>
                               
          <!-- This part doesn't really matter -->
            <div class="gallery-listing-box">
           <p class="byline-uppercase date">
          <cms:date k_page_date format='d. m. Y' /> <span><img src="images/gallery-box-underline.svg" alt=""></span> </p>
              <p class="gallery-listing-title">
               <cms:show k_page_foldertitle />
               </p>
                </div>
                                
          <div class="gallery-hidden">
          <!-- This should be the rest of the images uploaded to each set -->
           <a class="gallery-item" href="<cms:show gg_image/>"><img src="<cms:show gg_thumb/>" alt=""></a>
          </div>
            </div>
              </div>

I tried a lot of things, from listing folders, using pagination, etc. Just can't get it to work unfortunately.

[KK]

There are two distinct parts of your markup - the first image and then the rest of the images.
Although a single <cms:pages> loop can be used to output both (using 'k_count' to single out the first image), you may find it easier to use two loops -

Use the first <cms:pages> with 'limit set to '1' to get the first image. Use the second and skip the first image to show the rest.

Begin with a working HTML/CSS/JS design that does what you want and then start adding Couch tags to it.

Hope this helps.

Thanks as always KK. All working now.