I am currently experimenting with using isotope's masonry version to showcase a collection of thumbnail images, paired with the bootstrap lightbox plugin to enlarge these thumbnails.
The images are retrieved from my Flickr XML feed using PHP to extract the image source from the XML and display them on the webpage.
Here is the initial HTML structure of this page before PHP fetches the images from my Flickr XML feed and integrates them into the isotope and lightbox HTML:
<body id="photos">
<?php include('../parts/navigation.php'); ?>
<!-- start of page content -->
<div class="container">
<?php
$url = "https://www.flickr.com/services/feeds/photos_public.gne?id=40753822@N00&lang=en-us&format=rss_200";
$xml = simplexml_load_file($url);
$i = 0;
echo "<div class=\"isotope js-isotope\" data-isotope-options='{ \"itemSelector\": \".item\" , \"masonry\": { \"columnWidth\": 100, \"gutter\": 14 } }'>";
foreach( $xml->xpath('//media:thumbnail') as $image)
{
// Code for processing each image goes here
}
echo "</div>";
foreach( $xml->xpath('//media:thumbnail') as $image)
{
// Code for creating lightboxes for each image goes here
}
?>
<!-- end of page content -->
<?php include('../parts/footer.php'); ?>
</body>