Click Here to go back to Tutorial
This page may look like a mess but View the Source code to copy and paste the JavaScript Document for gallery.js
// JavaScript Document $(document).ready(function() { $('.gallery_thumbnails a').click(function(e) { e.preventDefault(); //set up vars for thumbnails 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(''+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(''+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'); } }); }