Displaying project images in an overlay slider?

Kirby 2 Solved ✅
1

I am using the showcase-snippet to load a thumbnail for each of my projects into a grid set up on my homepage. Now, I would like to make each thumbnail clickable and let a slideshow with all the respective project’s images appear on top of my entire homepage so the user can cycle through the images (but without an actual new page opening up). I’m really stuck with this since I don’t know how to set up the slideshow and make it load the images of the individual project that the user has clicked on.

Here’s a basic graphic representation of what I would like to accomplish using kirby as well as the code of my showcase snippet which loads the images onto the homepage:

(the showcase-snippet loading the images)

<?php

$projects = page('projects')->children()->visible();

if(isset($limit)) $projects = $projects->limit($limit);

?>

<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="#" target="blank" class="showcase-link">
            <img src="<?= $thumb->url() ?>" alt="Thumbnail for <?= $project->title()->html() ?>" class="" />
          </a>
        <?php endif ?>

	  </div>

	<?php endforeach ?>

</div>

(graphic representation of what I would like to do)

Overlay-Slider-Graphic1 2
Overlay-Slider-Graphic1 2.jpg1200×1988 91.8 KB

Again, I’ll be super grateful to anyone who can help me out. Much thanks in advance.

2

there are many jquery scripts which can do what you are trying to archive.

one of them for example is fancybox which is more commonly used.

http://fancybox.net/

3

Or try Photoswipe: https://github.com/dimsemenov/PhotoSwipe/releases

(does not require jQuery)

4

Or Maybe the script from getkirby site (Top site slider) wicth is very light and simple: https://github.com/getkirby/getkirby.com/blob/master/assets/js/templates/home.js

5

Lightweight, responsive and mobile ready:

http://wd.dizaina.net/en/scripts/peppermint/

https://feimosi.github.io/baguetteBox.js/