Loading sub images in fancybox slider

Kirby 3
1

Hey Im trying to load images from sub-pages in my fancy box slider

The code below successfully shows the first image of each subpage on the main page however the fancy box isn’t showing the images… not too sure where I’m going wrong

          <ul class="projects">


          <?php 
              $vari = page('portfolio');
           
              foreach ($vari->children()->listed() as $item): ?>
                  <?php if ($image = $item->image()): ?>
                    
                      <li>
                          <a href="<?= $item->url() ?>" data-fancybox="images">

                              <figure>
                   
                                  <?= $image->crop(400) ?>
                   
                              </figure>    
                          </a>
                      </li>

                  <?php endif ?>
              <?php endforeach ?>            
          </ul>
2

This goes to the $item->url(), should have the image url.

3

Hi thanks If I swap $item for $image the fancy box works but it just goes through the images on the main page, whereas I would like it to scroll through the sub page images,
so each image on the main page is the first image of each sub page, but then the slider would display all of the images for each first image on the master page

4

Don’t really understand what you want to achieve. You are looping through the children of the portfolio page, fetching the first image.

5

Yep for the main page…
So when I click one of the images I would like the slider to loop through all of the sub-pages images… so each one would show different set of images.

If the main page shows A1.jpg, B1.jpg, C1.jpg etc

If I clicked A1.jpg
The slider would show A1.jpg, A2.jpg, A3.jpg etc
And if I clicked B1.jpg
The slider would show B1.jpg, B2.jpg, B3,jpg etc,
etc etc,

Hope that makes sense, apologies a little difficult for me to explain

6

Ok, then I suggest you visit the fancybox documentation and look up the right markup for that setup.

In any case, you would need to fetch all images of $item and loop through them.

7

Im not sure its a fancybox question,
As fancybox is working correctly Im just unsure how to loop through the correct kirby items

8

The fancybox is just added as a CSS class so has no impact on the loop,

9

Well, if it is just a matter of fetching all item images:

<?php $images = $item->images(); ?>
<?php foreach ($images as $image): ?>
  <!-- markup here -->
<?php endforeach ?>
10

Hi apologies, I think I was struggling to explain this…
I found another old thread though which explains it quite well, im I’m trying to achieve the same thing,
The answer was to this was…
There are at least two ways to achieve this:

  1. Create a separate files section to which you assign a different template, then you can filter images by this template
  2. Create a files field in addition to the files section, where you select the preview image, then use this to exclude this image from the rest.

Are there any docs or tutorials explaining how this would be done?