Hi,
I've created a photo gallery which has the thumbnails in a div below a preview area div. Once a thumbnail is clicked, the preview area shows a larger version of the thumbnail image. I'm using both fancy box and farinspace.
The small glitch I have is that when changing images, there is a moment when the thumbnail bar is being displayed in the preview area. It's brief, but annoying, and I can't figure it out.
Occassionally, the problem isn't visible, so I assume the problem is with the pre-load.
www.artmarcsimon dot com
Thanks
Javascript
Code:
// JavaScript Document
$(document).ready(function(){
$('.gallery_thumbnails a').click(function(e){
e.preventDefault();
// set up vars from thumbnail
var photo_caption = $(this).attr('title');
var photo_fullsize = $(this).attr('href');
var photo_preview = photo_fullsize.replace('_fullsize','_large');
$('.gallery_preview').fadeOut(200, function(){
$('.gallery_preload_area').html('<img src="'+photo_preview+'"/>');
$('.gallery_preload_area img').imgpreload(function(){
$('.gallery_preview').html('<a class="overlayLink" href="'+photo_fullsize+'" title="'+photo_caption+'" style="background-image:url('+photo_preview+');"></a>');
$('.gallery_caption').html('<p>'+photo_caption+'</p>');
$('.gallery_preview').fadeIn(200);
setFancyboxLinks();
updateThumbnails();
});
});
});
// initialize gallery on load
var first_photo_caption = $('.gallery_thumbnails a').first().attr('title');
var first_photo_fullsize = $('.gallery_thumbnails a').first().attr('href');
var first_photo_preview = first_photo_fullsize.replace('_fullsize','_large');
$('.gallery_preview').fadeOut(200, function(){
$('.gallery_preload_area').html('<img src="'+first_photo_preview+'"/>');
$('.gallery_preload_area img').imgpreload(function(){
$('.gallery_preview').html('<a class="overlayLink" href="'+first_photo_fullsize+'" title="'+first_photo_caption+'" style="background-image:url('+first_photo_preview+');"></a>');
$('.gallery_caption').html('<p>'+first_photo_caption+'</p>');
$('.gallery_preview').fadeIn(200);
setFancyboxLinks();
updateThumbnails();
});
});
});
function setFancyboxLinks(){
$('a.overlayLink').fancybox({
'titlePosition' : 'inside',
'overlayColor' : '#000',
'overlayOpacity' : 0.8,
'transitionOut' : 'none',
'transitionIn' : 'none',
'autoScale' : true
});
}
function updateThumbnails(){
$('.gallery_thumbnails a').each(function(){
if ( $('.gallery_preview a').attr('href') == $(this).attr('href') ){
$(this).addClass('selected');
$(this).children().fadeTo(250, .4);
}else{
$(this).removeClass('selected');
$(this).children().css('opacity', '1');
}
});