Newbie-Question: Integrate CSS-Lightbox?

1

Hi!

Kirby keeps me confused. :woozy_face: I’m always stuck, when it comes to PHP. Maybe this is an easy task for one of you. A helping hand is welcome.

My website contains a masonry-grid, which is working fine:

		<section class="masonry">
			<?php foreach($page->images()->SortBy('filename', 'desc') as $image): ?>
			  <figure>
				  	<a href="<?= $image->url()?>">
				      <?= $image->resize(1000,1000,75) ?>
				  	</a>
			  </figure>
  			<?php endforeach ?>
		</section>

But now I want to add a pure-CSS-lightbox. I’ve found that nice one.

The CSSBox-Code is loaded in the header. The GitHub-Page shows this usage:

<div class="cssbox">
<a id="image2" href="#image2"><img class="cssbox_thumb" src="image_thumb.jpeg" />
    <span class="cssbox_full"><img src="image_full.jpeg" /></span>
</a>
<a class="cssbox_close" href="#void"></a></div>

If I got it right, I’ve to load two images (thumb and full). I’ve tried many things, but I’ve had no luck.

Thank you for your help.

2 
<?php $images = $page->images()->sortBy('filename', 'desc'); ?>
<section class="cssbox">
  <?php foreach($images as $image): ?>
    <a id="image<?= $image->indexOf($images) ?>" href="#image<?= $image->indexOf($images) ?>">
      <img class="cssbox_thumb" src="<?= $image->resize(1000,1000,75)->url() ?>" />
      <span class="cssbox_full"><img src="<?= $image->url() ?>" /></span>
    </a>
  <?php endforeach ?>
</section>
1 Like