I am building a wordpress website. I am implementing isotope for image layout and filtering (isotope.metafizzy)
I have configured Isotope already, so that images are layed out and filterable, this is all working fine. I am using a custom template of NextGen Gallery to generate the necessary image thumbnails and code for isotope to pick up.
I want to open the images inside a lightbox so that the larger versions can be viewed (probably using Lightbox2 in wordpress – but maybe will use Shadowbox JS)
THE ISSUE:
Currently, when i open an image in the lightbox, it loads all the images in the series, including images which are currently hidden (filtered by Isotope).
I want to change my solution so that only the visible images will be loaded into the Lightbox. This way a user can use isotope to filter down to the desired set of images, and can then view these in a larger format using the lightbox.
the code below is what is outputted by wordpress (from view page source). Note that the wordpress Lightbox2 plugin is currently adding the lightbox hooks (i believe).
I am assuming that I will need to change the lightbox somehow – but I have absolutley no idea what i need to do. Any suggestions would be welcome.
Isoptope appears to use opacity: 0; to hide the images – is there a way for lightbox to recognise this?
<div id="isotopewrapper">
<div id="container">
<div class="inner">
<div id="post-71" class="page single">
<h1 class="post-title super-heading">Isotope Portfolio</h1>
<div id="options">
<ul id="filters" class="option-set floated clearfix">
<li><a href="#" data-filter="*" class="selected">show all</a></li>
<li><a href="#" data-filter=".portrait">portrait</a></li>
<li><a href="#" data-filter=".headshot">headshot</a></li>
<li><a href="#" data-filter=".commercial">commercial</a></li>
<li><a href="#" data-filter=".fashion">fashion</a></li>
<li><a href="#" data-filter=".advertising">advertising</a></li>
</ul>
</div>
<div class="post-content">
<div id="isotopegallery" class="photos clearfix" id="ngg-gallery-1-71">
<!-- Thumbnails -->
<div class="photo portrait " style="width: 225px; height: 338px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6363.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6363" alt="mg_6363" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6363.jpg" />
</a>
</div>
<div class="photo headshot " style="width: 225px; height: 338px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6367.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6367" alt="mg_6367" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6367.jpg" />
</a>
</div>
<div class="photo portrait " style="width: 225px; height: 281px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6364.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6364" alt="mg_6364" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6364.jpg" />
</a>
</div>
<div class="photo headshot " style="width: 225px; height: 180px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6368.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6368" alt="mg_6368" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6368.jpg" />
</a>
</div>
<br style="clear: both" />
<div class="photo headshot " style="width: 225px; height: 180px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6370.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6370" alt="mg_6370" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6370.jpg" />
</a>
</div>
<div class="photo portrait " style="width: 225px; height: 180px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6372.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6372" alt="mg_6372" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6372.jpg" />
</a>
</div>
<div class="photo portrait " style="width: 225px; height: 338px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6378.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6378" alt="mg_6378" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6378.jpg" />
</a>
</div>
<div class="photo headshot " style="width: 225px; height: 338px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6394.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6394" alt="mg_6394" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6394.jpg" />
</a>
</div>
<br style="clear: both" />
<div class="photo fashion advertising " style="width: 225px; height: 338px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6400.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6400" alt="mg_6400" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6400.jpg" />
</a>
</div>
<div class="photo headshot " style="width: 225px; height: 180px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6404.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6404" alt="mg_6404" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6404.jpg" />
</a>
</div>
<div class="photo fashion " style="width: 225px; height: 281px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6406.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6406" alt="mg_6406" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6406.jpg" />
</a>
</div>
<div class="photo headshot fashion " style="width: 460px; height: 691px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6422.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6422" alt="mg_6422" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6422.jpg" />
</a>
</div>
<br style="clear: both" />
<div class="photo fashion " style="width: 225px; height: 150px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6421.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6421" alt="mg_6421" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6421.jpg" />
</a>
</div>
<div class="photo portrait " style="width: 225px; height: 338px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6393.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6393" alt="mg_6393" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6393.jpg" />
</a>
</div>
<div class="photo fashion " style="width: 225px; height: 180px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6425.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6425" alt="mg_6425" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6425.jpg" />
</a>
</div>
<div class="photo fashion advertising " style="width: 225px; height: 338px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6430.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6430" alt="mg_6430" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6430.jpg" />
</a>
</div>
<br style="clear: both" />
<div class="photo fashion commercial " style="width: 225px; height: 338px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6431.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6431" alt="mg_6431" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6431.jpg" />
</a>
</div>
<div class="photo advertising " style="width: 225px; height: 338px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6438.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6438" alt="mg_6438" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6438.jpg" />
</a>
</div>
<div class="photo headshot commercial " style="width: 225px; height: 150px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6445.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6445" alt="mg_6445" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6445.jpg" />
</a>
</div>
<div class="photo portrait " style="width: 225px; height: 281px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6453.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6453" alt="mg_6453" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6453.jpg" />
</a>
</div>
<br style="clear: both" />
<div class="photo advertising " style="width: 225px; height: 150px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6457.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6457" alt="mg_6457" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6457.jpg" />
</a>
</div>
<div class="photo headshot " style="width: 225px; height: 150px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6461.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6461" alt="mg_6461" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6461.jpg" />
</a>
</div>
<div class="photo portrait commercial " style="width: 225px; height: 338px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6463.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6463" alt="mg_6463" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6463.jpg" />
</a>
</div>
<div class="photo commercial portrait " style="width: 225px; height: 338px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6464.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6464" alt="mg_6464" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6464.jpg" />
</a>
</div>
<br style="clear: both" />
<div class="photo fashion portrait headshot " style="width: 225px; height: 180px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6491.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6491" alt="mg_6491" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6491.jpg" />
</a>
</div>
<div class="photo portrait headshot " style="width: 225px; height: 281px;">
<a href="http://localhost/imageworkshop/wp-content/gallery/portfolio/mg_6497.jpg"
title=" " rel="lightbox[set_1]">
<img title="mg_6497" alt="mg_6497" src="http://localhost/imageworkshop/wp-content/gallery/portfolio/thumbs/thumbs_mg_6497.jpg" />
</a>
</div>
<!-- Pagination -->
<div class="ngg-clear">
</div>
</div>
</div>
</div><!-- .post -->
<div class="clear"></div>
</div><!-- .inner -->
</div><!-- #container -->
</div><!-- close isotopewrapper-->
<div id="footer">
<div class="inner">
<span class="icon"></span>
<div class="fr">
<a title="" href="http://localhost/imageworkshop"><img id="logosmall" src="http://localhost/imageworkshop/wp-content/uploads/2011/05/image-workshop-logo-temp_small_trans.png" alt="" /></a>
<p>Copyright © 2011 Image Workshop, All Rights Reserved</p>
</div>
<div class="column first"><div id="text-3" class="widget widget_text widget-1"> <div class="textwidget"><p>Custom text or widget stuff can go here.</p>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="underfooter">
<div class="inner">
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
Cufon.replace('h1, h2, h3, h4, h5, h6, .comment-index, .comment-author, .comment-meta, .breadcrumb, .entry-title', {hover:true});
Cufon.replace('#menu-wrapper a', {hover:true});
$("a[rel^='prettyPhoto']").prettyPhoto({
//slideshow: 3000,
//autoplay_slideshow: true
default_width: 940,
default_height: 800,
theme: 'light_square'
});
});
</script>
</body>
</html>
<script>
jQuery(document).ready(function($) {
var $container = $('#isotopegallery');
// filter buttons
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
// switches selected class on buttons
$('#options').find('.option-set a').click(function(){
var $this = $(this);
// don't proceed if already selected
if ( !$this.hasClass('selected') ) {
$this.parents('.option-set').find('.selected').removeClass('selected');
$this.addClass('selected');
}
});
$(function(){
$container.isotope({
itemSelector : '.photo',
masonry : {
columnWidth : 5
}
});
});
});
</script>
Managed to fix this issue by adding the following code to the Javascript for ISOTOPE:
This clears and reloads the cache after each filter, and means that only the images which are shown are displayed in Shadowbox: