I've implemented a NextGen custom template (found here: https://github.com/cevenson/isotope-nextgen-gallery-template) for a client's WP site, but my thumbnails appear to cut-off and overlap on [most of] the initial load of the page (see screenshot below).
Also, the tag filtering doesn't actually work for all of the 'categories'. They're all coded the same in the filtering menu, so I'm not sure what could be wrong with the ones that don't work.
The site I'm using this on is: http://rajbhavsar.com/photos
Anyone use this? Any ideas would be much appreciated. Thanks!
EDIT:
The template code I'm using is as follows. Nothing looked out of the ordinary or problematic. Hence why I'm posting on here.
<?php
/**
Template Page for the gallery overview
Follow variables are useable :
$gallery : Contain all about the gallery
$images : Contain all images, path, title
$pagination : Contain the pagination content
You can check the content when you insert the tag <?php var_dump($variable) ?>
If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>
**/
?>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.isotope.min.js" type="text/javascript"></script>
<style type="text/css">
/**** centre nav and put at bottom ****/
.ngg-navigation{
position: relative;
width: 80%;
margin: 0 auto;
}
#isotopegallery{
clear: both;
margin: 0 0 30px 0;
}
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope, .isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: top, left, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
.photo{
float:left;
margin:0 10px 10px 0;
}
#filters{
margin-left:0;
border: none;
}
#filters li{
display: block;
float:left;
list-style-type: none;
margin: 0 0 20px 0;
}
#filters li a{
background: #242424;
padding:8px;
margin:5px 6px 5px 0;
color:#878787;
text-decoration: none;
text-transform:uppercase;
font-weight:normal;
}
#filters li a:hover{
background: #595959;
}
</style>
<script>
jQuery(function($){
var $container = $('#isotopegallery');
$container.isotope({
itemSelector: '.photo'
});
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
});
</script>
<ul id="filters" class="clearfix">
<li><a href="#" data-filter="*">Show All</a></li>
<li><a href="#" data-filter=".acting">Acting</a></li>
<li><a href="#" data-filter=".cirque">Cirque</a></li>
<li><a href="#" data-filter=".film">Film</a></li>
<li><a href="#" data-filter=".gymnastics">Gymnastics</a></li>
<li><a href="#" data-filter=".live-events">Live Events</a></li>
<li><a href="#" data-filter=".people">people</a></li>
<li><a href="#" data-filter=".portrait">Portrait</a></li>
<li><a href="#" data-filter=".quotes">Quotes</a></li>
<li><a href="#" data-filter=".speaking">Speaking</a></li>
<li><a href="#" data-filter=".television">Television</a></li>
<li><a href="#" data-filter=".travel">Travel</a></li>
<li><a href="#" data-filter=".uncategorized">Uncategorized</a></li>
<li><a href="#" data-filter=".usa-yoga">USA Yoga</a></li>
</ul>
<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?>
<div id="isotopegallery" class="photos clearfix" id="<?php echo $gallery->anchor ?>">
<?php
//Used to break down and extract the width and height of each image
function get_string_between($string, $start, $end){
$string = " ".$string;
$ini = strpos($string,$start);
if ($ini == 0) return "";
$ini += strlen($start);
$len = strpos($string,$end,$ini) - $ini;
return substr($string,$ini,$len);
}
?>
<!-- Thumbnails -->
<?php foreach ( $images as $image ) : ?>
<?php if ( !$image->hidden ) {
//GET the Size parameters for each image. this i used to size the div box that the images go inside of.
$the_size_string = $image->size;
$thewidth = get_string_between($the_size_string, "width=\"", "\"");
$theheight = get_string_between($the_size_string, "height=\"", "\"");
$divstyle = 'width:'.$thewidth.'px; height:'.$theheight.'px;';
}?>
<?php
//Get the TAGS for this image
$tags = wp_get_object_terms($image->pid,'ngg_tag');
$tag_string = ''; //store the list of strings to be put into the class menu for isotpe filtering
?>
<?php foreach ( $tags as $tag ) : ?>
<?php $tag_string = $tag_string.$tag->slug.' '; //alternativley can use $tag->name;, slug with put hyphen between words ?>
<?php endforeach; ?>
<div class="photo <?php echo $tag_string ?>" style="<?php echo $divstyle; ?>">
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
<?php if ( !$image->hidden ) { ?>
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" />
<?php } ?>
</a>
</div>
<?php if ( $image->hidden ) continue; ?>
<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
<br style="clear: both" />
<?php } ?>
<?php endforeach; ?>
</div>
<!-- Pagination -->
<?php echo $pagination ?>
<?php endif; ?>
It's not working on load, it's working on resize or refresh, right? It might help to load the CSS BEFORE the call to isotope.min.js and why don't you stick the initialization in there too.
These filters do not precisely mirror the classes. You have a class "cirque-3" but your filter is only .cirque and so on. All if not most of them don't match.