$(document).ready(function(){ // handle arrow key navigation on the galleries $(document).keyup(function(e){ switch(e.keyCode) { // User pressed "left" arrow case 37: $('#previous').trigger('click'); pause_slideshow(); break; // User pressed "right" arrow case 39: $('#next').trigger('click'); pause_slideshow(); break; } }); // select all the image posts--max of 20 as set in the WordPress admin settings images = $('#photo-wrapper').children(); // calculate width of each link for use in the loop // NOTE: the margins of each element is set in the CSS, not here var current_image = images[0].id; // set default image var total_images = images.length; // total amount of images var ctrl_max_width = 825; // max width of #nav-btns var block_width = ctrl_max_width / total_images; // find the width of the individual nav buttons var slideshow; // placeholder var for the slide show interval var in_progress = false; // attach a link for each image to the gallery controls $.each(images, function(i, val){ // each button attached below has the post id attribute attached as it's class (referenced with val.id) // so that the buttons know what image to act on when clicked $("#nav-btns").append('
  • '+ i +'
    • '); }); // what should happen when a nav gallery button is clicked $('#nav-btns a').click(function(){ if(in_progress == false) { in_progress = true; pause_slideshow(); var clicked = $(this).attr('class'); // If someone clicks the active button, do nothing if($(this).hasClass('active') == true) { return false; } // fade current image out to white $('#'+current_image).fadeOut(1000, function(){ // fade clicked image in switch_images(clicked); }); return false; } }); // 'previous' button controls $('#previous').click(function(){ if(in_progress == false) { in_progress = true; if(current_image != images[0].id) { $("#next").removeClass("disabled"); // find ID of the post that comes before the current one and then... // ...subtract 1 to find the next image id and feed it to switch_images() var current_image_number = $('#nav-btns .active').attr('id'); var previous_image_number = parseFloat(current_image_number.replace('photo-', '') - 1); // fade current image out to white $('#'+current_image).fadeOut(1000, function(){ // fade clicked image in switch_images(images[previous_image_number].id); }); } } return false; }); // 'next' button controls $('#next').click(function(){ if(in_progress == false) { in_progress = true; if(current_image != images[total_images-1].id) { $("#previous").removeClass("disabled"); // find ID of the post that comes before the current one and then... // ...subtract 1 to find the next image id and feed it to switch_images() var current_image_number = $('#nav-btns .active').attr('id'); var next_image_number = parseInt(current_image_number.replace('photo-', '')) + 1; // fade current image out to white $('#'+current_image).fadeOut(1000, function(){ // fade clicked image in switch_images(images[next_image_number].id); }); } else { // fade current image out to white $('#'+current_image).fadeOut(1000, function(){ // fade clicked image in switch_images(images[0].id); }); } } return false; }); // slideshow button controls $('#slideshow a').click(function(){ // slideshow is ON by default if($(this).text() == "Start Slideshow") { // we are starting the slideshow $(this).text("Pause Slideshow"); slideshow = setInterval( "slideSwitch()", 5000 ); } else { // we are pausing the slideshow pause_slideshow(); } return false; }); /* DEFAULTS *******************************/ // fade the first image in $('#nav-btns .'+current_image).addClass('active'); switch_images(current_image); /* In combination with some CSS, this fixes the slideshow functionality for IE browsers The problem encountered is detailed here: http://jimdiesel.wordpress.com/2009/04/30/javasvript-image-dimension-issue-in-internet-explorer/ */ if($.browser.msie) { $('#photo-wrapper .post, #photo-wrapper .post img').css('display', 'none').css('display', 'inline-block'); } // run the slideshow--comment this line out to disable slideshow by default slideshow = setInterval( "slideSwitch()", 5000 ); /* FUNCTIONS ******************************/ // pauses the slideshow function pause_slideshow() { $('#slideshow a').text("Start Slideshow"); clearInterval(slideshow); } // switches the images out // requires the post's id as the image param function switch_images(image) { // get current width of wrapper var current_image_width = $('#photo-wrapper').width(); // get width of next image var image_width = $('#'+ image +' .storycontent img').attr('width'); // check if we need to resize the wrapper (sometimes we don't and it creates a weird 1 second delay) if(image_width == current_image_width) { // fade the photo in $('#'+ image +', #'+ image +' .storycontent img').fadeIn(1000); // update current_image value current_image = image; // manage the 'active' nav button on the bar $('#nav-btns a.active').animate({ backgroundColor: "#ffe4c5" }, 500, function(){ $('#nav-btns a').removeClass('active').css('background-color', '#FFE4C5'); $('.'+image).addClass('active'); $('#nav-btns a.active').animate({ backgroundColor: "#FF7800" }, 1000); }); in_progress = false; } else { // ...animate wrapper to that width $('#photo-wrapper').animate({width:image_width}, 500, function(){ // manage the 'active' nav button on the bar $('#nav-btns a.active').animate({ backgroundColor: "#ffe4c5" }, 500, function(){ $('#nav-btns a').removeClass('active').css('background-color', '#FFE4C5'); $('.'+image).addClass('active'); $('#nav-btns a.active').animate({ backgroundColor: "#FF7800" }, 1000); }); // fade the photo in $('#'+ image +', #'+ image +' .storycontent img').fadeIn(1000, function(){ // update current_image value current_image = image; in_progress = false; }); }); } } // *fancy* rollovers for gallery nav controls $('#nav-btns a').mouseover(function(){ if($(this).hasClass('active') == false){ $(this).animate({ backgroundColor: "#FF7800" }, 500); } }) $('#nav-btns a').mouseout(function(){ if($(this).hasClass('active') == false){ $(this).animate({ backgroundColor: "#ffe4c5" }, 250); } }); }); // this runs the slideshow and is used in with setInterval in the actions for $('#slideshow a').click(); // note: must be outside of the $(document).ready() function slideSwitch(){ $("#next").trigger("click"); }