Isotope and swiper slider with dynamic content in a lightbox

Kirby 2 Questions 🤔
1

Hi Guys,

i have a question regarding the functionality of swiper slider in a lightbox with dynamic image content which is created with an isotope grid.

I have a 3 column image grid with isotope and i would like to have the following behavior:

▢ ▢ ▢
▢ ▢ ▢
▢ ▢ ▢

click on image ▸ opens responsive lightbox including swiper slider

  • the images are counted correctly
  • the clicked image is shown in the slider (the way i implemented always starts with the first image)
  • click on background closes the lightbox

Maybe someone has a coding idea?

Here is the snippet for the isotope grid including fancybox (lightbox):

	<div class="grid">
		<?php foreach($page->parent()->images()->sortBy('name', 'asc', SORT_NATURAL) as $image): ?>

			<div class="grid-item">
				<a href="<?php echo $image->url() ?>" class="fancybox"> 
					<figure>
						<img src="<?php echo $image->url() ?>" alt="<?php echo $image->name() ?>">
					</figure>
				</a>
				<p>
					<?php
					$string = $image->name();
					$string = str_replace("-", " ", $string);
					$newStr = str::ucfirst($string);
					echo($newStr);
					?>
				</p>

			</div>
		<?php endforeach ?>
	</div>

and here i put the snippet for the swiper slider

  <div class="swiper-container" style="height:535px;">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">    
      <!-- Slides -->
      <?php foreach($page->images()->sortBy('name', 'asc', SORT_NATURAL) as $image): ?>
        <figure class="swiper-slide">
          <img src="<?php echo $image->url() ?>" alt="<?php echo $page->title()->html() ?>">
          <div class="padding-top--0-5rem"> 
            <?php 
            echo "Image " . ($count + 1) . " of " . $page->images()->count();
            $count++; 
            ?>
          </div>
        </figure>
      <?php endforeach ?>


    </div>
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

  </div>

Thanks for ypur help in advance :slight_smile:

2

First, I would recommend that you don’t post PHP code (and even don’t work with PHP code, working with static HTML to get started), since you’re dealing with a HTML + JavaScript task, not a PHP task. There are a lot of different languages involved in web development, so it’s crucial to identify which ones are needed for a given task, so you can break up your work in manageable steps.

Then, my advice would be to not use a slider in a lightbox, because you’re going to need to wrangle two scripts which create DOM nodes on the fly and will need to setup one then the other in the right order with the right data… for each click on one of the thumbs. That’s doable, but not fun at all.

Instead, I would recommend using the PhotoSwipe library, which does basically the same thing but in one (more focused) plugin. See its documentation for how to feed it the full list of (big) images, the start offset, etc.

1 Like
3

Hi and thx for your answer, for my customer it is mandatory to have the one swiper style included.

		<div class="grid">
			<?php foreach($page->parent()->images()->sortBy('name', 'asc', SORT_NATURAL) as $image): ?>

				<div class="grid-item">
					<a href="#inline2" class="fancybox"> 
						<figure>
							<img src="<?php echo $image->url() ?>" alt="<?php echo $image->name() ?>">
						</figure>
					</a>
					<div id="inline2" style="display: none;">
						<div class="swiper-container" style="min-height:535px;">
							<!-- Additional required wrapper -->
							<div class="swiper-wrapper">    
								<!-- Slides -->
								<figure class="swiper-slide">
									<img src="<?php echo $image->url() ?>" alt="<?php echo $page->title()->html() ?>">
									<div class="padding-top--0-5rem"> 
										<?php 
										echo "Image " . ($count + 1) . " of " . $page->parent()->images()->count();
										$count++; 
										?>
									</div>
								</figure>
							</div>
							<!-- If we need navigation buttons -->
							<div class="swiper-button-prev"></div>
							<div class="swiper-button-next"></div>

						</div>
					</div>
					<p class="text-align--center padding-top--0-5rem">
						<?php
						$string = $image->name();
						$string = str_replace("-", " ", $string);
						$newStr = str::ucfirst($string);
						echo($newStr);
						?>
					</p>
				</div>
			<?php endforeach ?>
		</div>

I open the swiper slider in a lightbox by click on an image.
Is there a possiblity with PHP to get the number of the clicked Image, load it in the slider and show all the other project images in the slider?