Jquery gallery mystery

[Hisako]

Hi, I made a JavaScript gallery for my friends site and it looks great except when changing images, the preview image disappears for a split second and the layout gets messed up.

http://hisakoando.lolipop.jp/picturebook1.html

Any ideas? Thanks in advance

[LaneSalaman]

It may just be the time it’s taking for the images to load. Maybe you could write a simple jQuery image preloader. I hope this helps.

[Hisako]

Hi LaneSalaman,

Thanks for replying! It’s my first post ever so I wasn’t expecting such a quick reply.
As to your suggestion of image preloader, I already have placed one in there. It was a part of the tutorial video I watched in order to make it, and they used the one from Farinspace.

I’m no expert in javascript or jquery, but it seems odd to me that the image preload was put in after image fade out.

I would really appreciate it if you or anyone could look at the javascript that I have. And if you have any alternative script, please let me know.

Thanks.

// 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','_preview');





$('.gallery_caption').slideUp(500);

$('.gallery_preview').fadeOut(500, function(){



$('.gallery_preload_area').html('');

$('.gallery_preload_area img').imgpreload(function(){



$('.gallery_preview').html('');

$('.gallery_caption').html('
View larger
'+photo_caption+'
');



$('.gallery_preview').fadeIn(500);

$('.gallery_caption').slideDown(500);



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','_preview');





$('.gallery_caption').slideUp(500);

$('.gallery_preview').fadeOut(500, function(){



$('.gallery_preload_area').html('');

$('.gallery_preload_area img').imgpreload(function(){



$('.gallery_preview').html('');

$('.gallery_caption').html('
View Larger
'+first_photo_caption+'
');



$('.gallery_preview').fadeIn(500);

$('.gallery_caption').slideDown(500);



setFancyboxLinks();

updateThumbnails();



});



});



});



function setFancyboxLinks(){



$('a.overlaylink').fancybox({



'titlePosition'	: 'over',

'overlayColor' : '#000',

'overlayOpacity' : 0.8,

'transitionOut' : 'elastic',

'transitionIn' : 'elastic',

'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');



}



});







$('.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');



}



});



}

[Author]

Posts