I'm attempting to use isotope's masonry (gutter version) to display a set of thumbnail images and then the bootstrap lightbox plugin to open said thumbnails to a larger size.
The images are being pulled from my flickr xml feed using some PHP to get the image src from the xml and then display them on my page.
Here's the body html of this page before PHP collects the images from my flickr xml feed and builds them in to the isotope and lightbox html:
<body id="photos">
<?php include('../parts/navigation.php'); ?>
<!-- page content start -->
<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)
{
$attributes = $image->attributes();
$attr = $attributes['url'];
$nAttr = str_replace("_s.jpg", "_n.jpg", $attr);
$bAttr = str_replace("_s.jpg", "_b.jpg", $attr);
echo "<div class=\"item\">
<a href=\"#lightbox" . $i . "\" data-toggle=\"lightbox\">
<img class=\"gallery\" src=\"" . $nAttr . "\">
</a>
</div>";
$i++;
}
echo "</div>";
$i = 0;
foreach( $xml->xpath('//media:thumbnail') as $image)
{
$attributes = $image->attributes();
$attr = $attributes['url'];
$bAttr = str_replace("_s.jpg", "_b.jpg", $attr);
echo "<div id=\"lightbox" . $i . "\" class=\"lightbox fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
<div class=\"lightbox-dialogue\">
<div class=\"lightbox-header\">
<button type=\"button\" class=\"close\" data-dismiss=\"lightbox\" aria-hidden=\"true\">×</button>
</div>
<div class=\"lightbox-content\">
<img src=\"" . $bAttr . "\">
</div>
</div>
</div>";
$i++;
}
?>
<!-- page content end -->
<?php include('../parts/footer.php'); ?>
</body>
Here's the "view source" of this page taken from the browser after its been rendered.
There are more thumbnails and lightboxes created by the PHP foreach than shown below; I've just shown the first 5 results from XML feed for brevity here.
<html>
<head>
<!-- meta -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- title -->
<title>My Title</title>
<!-- jq / js -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/activeclass.js"></script>
<script type="text/javascript" src="/js/isotope.pkgd.min.js"></script>
<script type="text/javascript" src="/js/isotope-centered-masonry.js"></script>
<script type="text/javascript" src="/js/bootstrap-lightbox.js"></script>
<!-- css -->
<link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/parts.css">
<link rel="stylesheet" type="text/css" href="/css/photo-gallery.css">
<link rel="stylesheet" type="text/css" href="/css/bootstrap-lightbox.min.css">
</head>
<body id="photos">
<header>
<!-- navigation -->
<div class="navspacer">
</div>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="ManeEventLogo" src="#"></a>
</div>
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/index.php">THING 1</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">THING 2<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">DROP 1</a></li>
<li><a href="#">DROP 2</a></li>
<li><a href="#">DROP 3</a></li>
<li><a href="#">DROP 4</a></li>
</ul>
</li>
<li>
<a href="#">THING 3</a>
</li>
<li>
<a href="#">THING 4</a>
</li>
<li>
<a href="#">THING 5</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<!-- page content start -->
<div class="container">
<div class="isotope js-isotope" data-isotope-options='{ "itemSelector": ".item" , "masonry": { "columnWidth": 100, "gutter": 14 } }'>
<div class="item">
<a href="#lightbox0" data-toggle="lightbox">
<img class="gallery" src="https://farm8.staticflickr.com/7275/7535360724_02f36c5af4_n.jpg">
</a>
</div>
<div class="item">
<a href="#lightbox1" data-toggle="lightbox">
<img class="gallery" src="https://farm7.staticflickr.com/6191/6074713333_0a8d9bbd2d_n.jpg">
</a>
</div>
<div class="item">
<a href="#lightbox2" data-toggle="lightbox">
<img class="gallery" src="https://farm7.staticflickr.com/6064/6074711757_c36f4774f2_n.jpg">
</a>
</div>
<div class="item">
<a href="#lightbox3" data-toggle="lightbox">
<img class="gallery" src="https://farm7.staticflickr.com/6186/6075250192_f6db319da2_n.jpg">
</a>
</div>
<div class="item">
<a href="#lightbox4" data-toggle="lightbox">
<img class="gallery" src="https://farm7.staticflickr.com/6076/6074708467_fcc99c2584_n.jpg">
</a>
</div>
<div id="lightbox0" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-dialogue">
<div class="lightbox-header">
<button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">×</button>
</div>
<div class="lightbox-content">
<img src="https://farm8.staticflickr.com/7275/7535360724_02f36c5af4_b.jpg">
</div>
</div>
</div>
<div id="lightbox1" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-dialogue">
<div class="lightbox-header">
<button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">×</button>
</div>
<div class="lightbox-content">
<img src="https://farm7.staticflickr.com/6191/6074713333_0a8d9bbd2d_b.jpg">
</div>
</div>
</div>
<div id="lightbox2" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-dialogue">
<div class="lightbox-header">
<button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">×</button>
</div>
<div class="lightbox-content">
<img src="https://farm7.staticflickr.com/6064/6074711757_c36f4774f2_b.jpg">
</div>
</div>
</div>
<div id="lightbox3" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-dialogue">
<div class="lightbox-header">
<button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">×</button>
</div>
<div class="lightbox-content">
<img src="https://farm7.staticflickr.com/6186/6075250192_f6db319da2_b.jpg">
</div>
</div>
</div>
<div id="lightbox4" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-dialogue">
<div class="lightbox-header">
<button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">×</button>
</div>
<div class="lightbox-content">
<img src="https://farm7.staticflickr.com/6076/6074708467_fcc99c2584_b.jpg">
</div>
</div>
</div>
<!-- page content end -->
<footer>
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container img-center">
<!-- left-side bottom navbar items -->
<ul class="nav navbar-nav navbar-left">
<li>
<p id="Telephone"><span id="old-tele">g</span> 01225 712211</p>
</li>
</ul>
<!-- right-side bottom navbar items -->
<div class="img-center">
<ul class="nav navbar-nav navbar-right img-inline">
<li>
<a href="#" target="_blank" title=""><img src="\img\icons\twitter\Twitter_logo_blue.png" class="tw-logo"></a>
</li>
<li>
<a href="#" target="_blank" title=""><img src="\img\icons\instagram\instagram-logo.png" class="ig-logo"></a>
</li>
<li>
<a href="#" target="_blank"><img src="\img\icons\facebook\fb-findus\FB_FindUsOnFacebook-320.png" class="fb-logo"></a>
</li>
</ul>
</div>
</div>
</nav>
</footer>
</body>
</html>
General Issue.. not sure what's causing it;
- When the page loads there's a ton of empty space created below the gallery (like loads, way more than the height of the gallery itself).
Issues with Isotope's masonry layout:
- Firstly the masonry layout looks like this when the page initially loads or is refreshed:
...the thumbnails are all stacked on top of one another for some reason.
It sorts itself out if the window is resized, however:
How do I get the masonry layout to sort itself when the page loads? I've tried solutions here and here, but to no avail.
Issues with Bootstrap Lightbox:
Each image should open much like in this fiddle. I've compared the code that the PHP spits out for each thumbnail and lightbox combination and can't see why the following issues are happening:
- When clicking on a thumbnail to open the larger image in lightbox I'm finding that the image slips out of the right and bottom sides of the modal box (by about the same amount each time):
- (This is likely related to the above). When clicking on the thumbnail to open the larger image in a smaller window size, such as a smart phone, the image opens full size (the red box I've drawn shows how big the modal should be and therefore where the image should fit:
- When closing an image opened in lightbox, the area to click on shrinks to a small random area on the thumbnail(!) The red box below, for example, shows where the clickable area is for that thumbnail should you want to open it in lightbox again:
