Home › Forums › JavaScript › Jquery gallery mystery
- This topic is empty.
-
AuthorPosts
-
August 15, 2012 at 2:48 am #39383HisakoMember
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
August 15, 2012 at 9:45 am #107960LaneSalamanMemberIt 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.
August 16, 2012 at 4:40 am #108093HisakoMemberHi 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(''+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(''+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');
}
});
}
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.