This is an extension of a question I previously asked here in the forum. I would like to set up a slider which lets the user cycle through all the images of a project, while only the first image of each project is being displayed on the homepage itself. The slider should appear on top of the entire page (rather than loading a separate page for each project which contains the slider) once the user clicks on a project’s image.
The forum kindly recommended my a variety of slider plugins to accomplish this. I am working with the Fancybox slider (http://fancyapps.com/fancybox/3/). I have managed to set up the slider successfully, it is now part of my showcase-snippet. The part of the snippet which enables the slider looks like this:
<div class="project-wrapper"> <div class="flex-grid-thirds"> <?php foreach($projects as $project): ?> <div class="col"> <a href="#" class="project-title"> <?= $project->title()->html() ?> </a> <?php if($image = $project->images()->sortBy('sort', 'asc')->first()): $thumb = $image; ?> <a href="<?= $thumb->url() ?>" data-fancybox="images"> <img src="<?= $thumb->url() ?>" alt="Thumbnail for <?= $project->title()->html() ?>" class="" /> </a> <?php endif ?> </div> <?php endforeach ?> </div> </div>
This works in so far as it loads the first image of a project, puts it into my grid (on the homepage) and lets the user click on in to open the fancybox-slider. What it doesn’t do yet, is load the other images which were put into the project in the panel. How can I do that? The homepage should continue to only display the first image of each project but with the slider the user is supposed to be able to cycle through all images of each respective project.