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 …

Just load the images with $project->images() and iterate over the collection. Look: https://getkirby.com/docs/cheatsheet/page/images Also a nice gallery slider… small, no dependencies (no jQuery) and mobile ready: https://feimosi.github.io/baguetteBox.js/

[image] Svnt: Just load the images with $project->images() and iterate over the collection. That will then show all images, which is not what @JoSch wants. He wants to show only the first image. Maybe you can loop through all images, and only put the image tag in for the first image, then hi…

[image] texnixe: Maybe you can loop through all images, and only put the image tag in for the first image, then hide the links, or something like this. Hmm, render the normal Fancybox markup: <div> <a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a> <a data-fancybox="gall…

Hm, I think it would be better not to load all images at once and then hide them visually, but only load them if someone clicks on the link to the next image.

Thanks for the quick response, to both of you. I did make some progress loading the images via $project->images(). I’m declaring a variable first in my snippet: <?php $projectImages = $project->images(); ?> Then I use it to create links for the fancybox-slider to cycle through. I also call a …

I think each gallery probably should have it’s own data-attribute, not sure.

you can clean up alot in your code… <?php // no need to open up php tags many times foreach($projects as $project): // what's the sense of using $projectImages once.. $projectImages = $project->images(); ?> // you can just use $image right away $thumb = $image; // this should resolve in no …

[image] JoSch: Also, the slider shows the first image of every project twice, because it loads the thumbnail as well as the image the thumbnail is created from. You first get the first image, then you loop through all images, so in your example above, you would have to exclude the first image…

Wow, thanks, your alternative works super. Only issue now is that the custom option which I had set up for the fancybox-slider don’t apply anymore to the slider which is opened upon clicking the images. I had set it up like this: <script type="text/javascript"> $().fancybox({ selecto…

Loading all images of a project into a Fancybox-slider (but only displaying the first image on the homepage)

The CMS Questions

JoSch August 11, 2017, 1:59pm 12

Cool, thanks again. Much for all the help.

Fancybox 3 + Kirby CMS: How to exclude certain image from slider

Topic		Replies	Views
Loading sub images in fancybox slider Questions v3	9	525	March 14, 2023
Fancybox 3 + Kirby CMS: How to exclude certain image from slider Questions	3	1329	August 12, 2017
First picture not appearing Questions	1	215	March 31, 2020
Displaying project images in an overlay slider? Questions v2	4	1474	August 8, 2017
Flickity Carousel displays only the first image Questions v2	3	4404	August 17, 2018

Loading all images of a project into a Fancybox-slider (but only displaying the first image on the homepage)

Related topics