/*jQuery function for the expanding slide zoomer (thumbnails expand the large image)*/ $.fn.slideZoom = function (thumb_class, expand) { //thumb_class is the class used on thumbnail images, and expand is a variable for whether to automatically expand the large slide div or not expand = typeof(expand) != 'undefined' ? expand : false; //if not set, set expand to false (don't expand the large slide div - it will always be open) /*For each element (hopefully only one), perform the setup:*/ this.each(function () { /*Initialize variables:*/ var $slide_div = $(this); //get the large slide div we're using if(expand) { //if we want to have the expanding div $slide_div.append('
^ Close ^
'); //add the "close" div var $close_div = $slide_div.find('.close_div'); //get the close div } var $slides = $slide_div.find('img'); //find the slides themselves var $thumbs = $('.'+thumb_class); //get all of the thumbnail images var expanded = false; //flag for whether the expandable div is open var last_slide_num = -1; //the last slide that was selected (initialized to -1) var slide_num = -1; //the new slide we want to select (init to -1) var $new_slide; //variable for the new slide object var $last_slide; //variable for the last slide object var $new_thumb; //variable for the new thumb object var $last_thumb; //variable for the last thumb object var border_color = '#000000'; //color of border around thumbs var expand_delay = 500; //time it takes to open the expandable div (default 500) /*Set up divs to original positions, as needed:*/ $slides.hide(); //hide all the full-sized slides if(expand) { //if the div is to expand $slide_div.hide(); //hide the expandable div /*Now react to clicks on the thumbnails:*/ $thumbs.click(function() { slide_num = $thumbs.index(this); //get the thumbnail index for this slide $new_thumb = $($thumbs.get(slide_num)); //get the new thumb $last_thumb = $($thumbs.get(last_slide_num)); //get the last thumb $new_slide = $($slides.get(slide_num)); //use the variable for the new slide $last_slide = $($slides.get(last_slide_num)); //get the last slide //Deal with the images and div based on what has already been done: if (expanded) { //if the div is already expanded if (slide_num != last_slide_num) { //if the new slide isn't the same as the last one $last_slide.fadeOut(200, 'swing', function() { $new_slide.fadeIn(200); }); //fade out the old slide, then fade in new slide (callback used to avoid "shrinking" of expansion div when both images are faded out) $last_thumb.removeClass('selected'); //set it as not selected $new_thumb.addClass('selected'); //set it as selected $last_slide.removeClass('selected'); //toggle the selection class on the old slide $new_slide.addClass('selected'); //toggle on new slide last_slide_num = slide_num; //set this slide number as the last one selected } else { //otherwise, if it is the same slide, go ahead and close things up $close_div.hide(); $slide_div.slideToggle(expand_delay, function() { $new_slide.hide(); //hide the last slide (it'll already be gone, but this turns it "off" for when the div is reopened) }); //close the expandable div expanded = false; //set it as not expanded $new_slide.removeClass('selected'); //set it as not selected $new_thumb.removeClass('selected'); //set it as not selected } } else { //if the div hasn't already been expanded $close_div.show(); $new_slide.show(); //show the selected image $new_thumb.addClass('selected'); //set it as selected $new_slide.addClass('selected'); //toggle the selection class on this slide last_slide_num = slide_num; $slide_div.slideToggle(expand_delay); //open the expandable div expanded = true; //set it as expanded } }); /*Deal with someone clicking on the "close" area (div):*/ $close_div.click(function() { $close_div.hide(); $slide_div.slideToggle(expand_delay, function() { $last_slide.hide(); //hide the last slide (it'll already be gone, but this turns it "off" for when the div is reopened) }); //close the expandable div expanded = false; //set it as not expanded $last_thumb = $($thumbs.get(last_slide_num)); //get the last thumb $last_slide = $($slides.get(last_slide_num)); //get the last slide $last_slide.removeClass('selected'); //remove the selected class of that slide $last_thumb.removeClass('selected'); //set it as not selected }); } else { //if the div is NOT to expand $new_slide = $slides.first(); //get the first slide slide_num = 0; //get the thumbnail index for this slide $new_thumb = $($thumbs.get(slide_num)); //get the new thumb $new_thumb.addClass('selected'); //select the thumb $new_slide.addClass('selected'); //select the slide $new_slide.show(); //show the first slide last_slide_num = slide_num; /*React to a thumbnail being clicked:*/ $thumbs.click(function () { slide_num = $thumbs.index(this); //get the thumbnail index for this slide $new_thumb = $($thumbs.get(slide_num)); //get the new thumb $last_thumb = $($thumbs.get(last_slide_num)); //get the last thumb $new_slide = $($slides.get(slide_num)); //use the variable for the new slide $last_slide = $($slides.get(last_slide_num)); //get the last slide if (slide_num != last_slide_num) { //if the new slide isn't the same as the last one $last_slide.fadeOut(200, 'swing', function() { $new_slide.fadeIn(200); }); //fade out the old slide, then fade in new slide (callback used to avoid "shrinking" of expansion div when both images are faded out) $last_thumb.removeClass('selected'); $new_thumb.addClass('selected'); $last_slide.removeClass('selected'); //toggle the selection class on the old slide $new_slide.addClass('selected'); //toggle on new slide last_slide_num = slide_num; //set this slide number as the last one selected } }); } }); };