Using Flickity in Kirby CMS: How to create individual slideshows for projects + show them in a separate <div> (on click)?

Kirby 2 Questions 🤔
1

Hi.

I am trying to implement the Flickity plugin into my CMS.

What I would like to do is the following: My showcase-snippet creates a grid (using the Masonry plugin) containing all my projects. The grid is working just fine. When clicking on one of the items in the grid, a <div> which sits on top of the entire page fades in. I want this <div> to contain all the information which is relevant to the respective project which was clicked on – plus a slideshow with all the images which belong to the project. In order to do that, I tried generating an individual Flickity-slideshow for each of the projects (in the snippet’s php) and then hiding it, put pulling it into the <div>which fades in when the respective item in the grid is clicked on. The php of the snippet looks as follows (the slideshow contains only sample images right now because I am trying to get it to work properly first before figuring out how to put the actual project images into it):

	  <div class="project-wrapper">

		  <?php foreach($projects as $project): ?>

		  	<div class="project-entry">

				<!-- Generating individual sliders to pull into project info box -->
				<div class="showcase-slideshow">
					<div class="carousel"
					  data-flickity='{ "freeScroll": true }'>
					  <div class="carousel-cell">
					  	<img src="http://lorempixel.com/50/50/sports/">
					  </div>
					  <div class="carousel-cell">
					  	<img src="http://lorempixel.com/150/150/cats/">
					  </div>
					  <div class="carousel-cell">
					  	<img src="http://lorempixel.com/150/150/cats/">
					  </div>
					  <div class="carousel-cell">
					  	<img src="http://lorempixel.com/150/150/cats/">
					  </div>
					  <div class="carousel-cell">
					  	<img src="http://lorempixel.com/150/150/cats/">
					  </div>
					</div>
				</div>
				<!-- ////////////////// -->

				<!-- Generating grid items from projects -->
		 		<div class="grid-item trans-1">
		 					<?php 
			        $projectImages = $project->images();
			        foreach($projectImages as $projectImage):
			        ?>
					      <a>
					        <?php if($projectImage == $projectImages->first()): ?>
					          <img src="<?= $projectImage->url() ?>" alt="Thumbnail" class="" />
					        <?php endif ?>
					      </a>    
			      	<?php endforeach ?>
		  	</div>
		  	<!-- ////////////////// -->

		  </div>

	  <?php endforeach ?>
	</div>

Then, further along in the snippet, I have the <div> which shows up when clicking on one of the grid items:

	<div class="descriptions">
		<div class="description">
			<div class="project-gallery-container">
				<div class="project-gallery">
				<!-- empty <div> for slideshow -->
				</div>
			</div>

			<div class="close">
				<span>CLOSE</span>
			</div>
		</div>
	</div>

It contains an empty <div> into which I then tried to put the individual slideshows with this javascript:

<!-- Script to fetch project gallery and display in separate area -->
<script type="text/javascript">
	$(".project-wrapper").on("click", ".project-entry", function () {
		$(".project-gallery").html($(this).find(".showcase-slideshow").html());
	});
</script>
<!-- ////////////////// -->

Unfortunately, my entire setup does not work properly. There is a Flickity-slider showing up in the .descriptions-div (which is toggled when a grid item is clicked) but the slider-buttons do not work. Where did I go wrong and how do I have to change my snippet in order to achieve what I tried to do?

I’m grateful for any advice and help with my code.

2

You probably need to refresh flickity because you are manipulating the page after the page has loaded. There is probably a call back to get it to refresh. You need to do this inside your click event (probably). Try this.

3

I regularly use Flickity and Masonry, but I don’t understand your question. Could you provide a reduced test case or share your project ?

Running one of these plugin in one thing, both is an other.

4

Sure, I’d love to share it. But how can I set it up for you to see? I’m running it on a local server and don’t have a webspace for it yet. But I need the php to work in order for you to see what I am having difficulties with. Do you know a way to share a kirby-project without needing a web server?

5

Refreshing sounds like a good idea. But where might I have to place $carousel.flickity('reloadCells') in my click event though?

<!-- Script to fetch project gallery and display in separate area -->
<script type="text/javascript">
	$(".project-wrapper").on("click", ".project-entry", function () {
		$(".project-gallery").html($(this).find(".showcase-slideshow").html());
	});
</script>
<!-- ////////////////// -->
6

Yes, you can use Ngrok. this will share your local host publicly.

7

Try immediatly after that line. I am not much of a javascript programmer, and i cant see your whole project code so its hard to know for sure.

8

Thanks for the quick reply, I’m rather new to javascript as well. I’ll try a couple of things and then move on to sharing my project here so you can have a look at my code directly.