Fetch Slideshow in Popup with AJAX

The CMS Questions
1

Hello,
I’m trying to open each of my Projects (Children of projects.php, just images) in a popup div with a swiper slideshow in it.

First I made a snippet for my slideshow in my project.php file, called slideshow.php:

<div class="swiper-container">
  <div class="swiper-wrapper">
    <?php foreach ($page->images() as $image): ?>
      <div class="swiper-slide">
        <img src="<?= $image->url() ?>"
      </div>
    <?php endforeach ?>
  </div>
</div>

<script>
const swiper = new Swiper('.swiper-container', {
  // slideshow options
});
</script>

The script tag is important to call the slideshow, that’s why I placed it in the snippet.

Then I called the snippet in my content representation of the project page, project.json.php:

<?php
$data = snippet('slideshow', [], true);

echo json_encode($data);

I then fetched the given data in an overlay div when I click on a thumbnail on my projects.php file:

const projects = document.querySelectorAll('a.load');
const container = document.querySelector('#container')
const containercontent = container.querySelector('.containercontent')

projects.forEach((project) => {
  project.addEventListener('click', function(e) {
    e.preventDefault();
    container.classList.add('open');

    let url = this.getAttribute('href') + '.json';
    loadContent(url);
  });
});

function loadContent(url) {
  fetch(url)
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      containercontent.innerHTML = data
    })
    .catch(function(error) {
      console.log(error)
    });
  
};

When I click the thumbnail, the div pops up and my slideshow snippet with the images gets rendered. But the slideshow does not work. It seems like the script tag for calling the slideshow (in my snippet) doesn’t run.

Any help?

2

You are using Kirby headless and fetching the stuff into a javascript front end of some kind? Content representations are for just that - content. You would need to set the slide show script up on the front end side, not in the content rep.

3

I put the slideshow code into my fetch() function, everything works fine now.

However, I would like to change the URL to the project URL when the container with the slideshow is opened. I therefore made a history.pushstate() call:

projects.forEach((project) => {
  project.addEventListener('click', function(e) {
    e.preventDefault();
    container.classList.add('open');

    let href = this.getAttribute('href');
    let uri = this.getAttribute('data-uri');
    let url = href + '.json';
    getContainer(url);
    history.pushState(uri, null, href)
  });
});

It works, the URL is changing now to mywebsite.com/projects/project. But when I refresh the page, I get directly to the project page (without container and project overview in the background).

Is there a possibility to call the fetch() event directly from my browser? So I could have a direct link to a project (mywebsite.com/projects/project) and it gets opened directly on my home page in the container?

Thank you!