I’ve always custom built JavaScript-powered sliders for my clients. When I stumbled upon Nivo Slider, I was pretty impressed with its features, fade transitions and ease of integration. It seemed like the perfect fit to display photo galleries on the new website for Oklahoma City photographers, Brock’s Photography.
But, when I got down to the nitty-gritty of implementing image thumbnails, I found an incredible lack of support for integrating this great feature.
So, here’s what I did to get the image thumbnails to display properly in a Nivo Slider powered gallery.
The first step is to specify an image thumbnail location in the HTML through the use of the rel=”“ attribute. This indicates to Nivo the location of the thumbnail image file. You’ll see I’ve placed my Nivo Slider elements within a container DIV, #gallery. This will become important later because we’ll resize this container.
Even though Nivo knows where the thumbnails are, and sets their objects up in the slider, they are not visible. Let’s modify the CSS to activate them.
.nivo-controlNav a {
display:inline; /* Display the thumbnail link element */
}
#slider .nivo-controlNav img {
display:inline; /* Un-hide the thumbnail image element */
position:relative;
margin: 10px 10px 0 0; /* Provide some white space around the thumbs */
}
Great! Now we’ve got image thumbnails. But, the positioning is off. Let’s adjust so the thumbnails appear below the gallery image:
#slider .nivo-controlNav {
position: absolute;
top: 600px; /* 600px is the height of our gallery image */
}
That solves positioning. But, what’s even worse, is that when we have so many images that thumbnails wrap to a second row and beyond, the thumbnails overlay on top of the rest of our content beneath the slider. Ouch! I could set the height or positioning in CSS, but I’ve written a custom plugin allowing my client to manage the gallery images herself, so I can’t hard code positioning since I don’t know if we’re dealing with one row of thumbnails or six. Double ouch!
So, I wrote a JavaScript function to calculate the appropriate height. This grabs the height of the slider, the height of the thumbnails container, and then resizes the container DIV (#gallery) appropriately so that any content below our slider gets bumped down the page.
function sizeThumbs(){
var thumb_height = $(".nivo-controlNav").height();
var gal_height = $("#slider").height();
var this_height = (thumb_height+gal_height); /* Calculate total height */
$("#gallery").height( this_height );
}
We need to call this function after the slider loads. Luckily, Nivo Slider makes this incredibly easy. We just add an additional parameter to the $().nivoSlider() function:
$('#slider').nivoSlider({
effect: 'fade',
controlNav:true, /* Display the control navigation */
controlNavThumbs:true, /* Display thumbnails */
controlNavThumbsFromRel:true, /* Source thumbnails from rel attribute */
afterLoad: function(){ sizeThumbs(); } /* Call the resize function */
});
Ta-da! The only problem is, sometimes the JavaScript beats the browser to the finish line: it is calculating the height before the images have fully loaded, thus giving inaccurate values. The solution? Alter the function and setup a timer to make sure we’re fully loaded.
var last_height = 0; /* Initiate height logging variable in global scope */
function sizeThumbs(){
var thumb_height = $(".nivo-controlNav").height();
var gal_height = $("#slider").height();
var this_height = (thumb_height+gal_height); /* Calculate total height */
$("#gallery").height( this_height );
/* Compare to last height and call function again if necessary */
if ( this_height != last_height ) setTimeout( function(){ sizeThumbs(); }, 750 );
last_height = this_height;
}
Original Article
