Image filed to thumbnail grid with lightbox.

[Peter Knight]

If my client has added more than 1 image to an image field (called "blog_images"), how could I

1. Output a grid of images on my webpage as cropped thumbnails.

2. Make them clickable so they display a lightbox such as http://fancyapps.com/fancybox/

Thanks

[marcus]

This is easy as:

<ul class="thumbs">
<?php
$images = $page->blog_images;
foreach ($images as $image) {
    $thumb = $image->size(106, 106); // or whatever your thumb dimensions are
    echo "<li><a href='$image->url' class='fancybox'><img src='$thumb->url' alt='$image->description'></a></li>";
}?>
</ul>

Assumptions for this code snippet:

• You will be styling .thumbs via CSS to get the grid style output
• You are using $(".fancybox").fancybox(); as a trigger

Edited August 9, 2014 by marcus

[Peter Knight]

Thanks so much, Marcus.

I'll try that later.

I know with my "usual" CMS I could achieve this in about 15 - 30 mins so it's great to see it's as easy within PW