
<!-- cycle slideshow -->

$(document).ready(function() {
    $('#slideshow')
		.cycle({
		fx: 'fade',
		timeout: 0,
		pager: '#slideshownav',
		before: function(curr, next, opts) { 
    		var alt = $(next).find('img').attr('alt'); 
    		$('#slideshowcaption').html(alt); 
		}
	}); 

<!-- grab image title for additional nav -->

	$('#projectnav #current img').load(function() {
			$('#projectnavtitle').html(this.alt);
	});	
	$('#projectnav img').hover(function() {
			$('#projectnavtitle').html(this.alt);
	});
	$('#projectnav img').mouseout(function() {
			$('#projectnavtitle').html($('body').attr('id'));
	});


<!-- enlarge image on click -->

  $('a.lightbox').click(function(e) {
    
    $('<div id="overlay"></div>')
      .css('opacity', '0')
      .css({
		  'width' : $(document).width(),
		  'height' : $(document).height(),
      })
      .animate({'opacity': '0.8'}, 'slow')
      .appendTo('body');
      
    $('<div id="lightbox"></div>')
      .hide()
      .appendTo('body');
      
    $('<img />')
      .attr('src', $(this).attr('href'))
      .load(function() {
        positionLightboxImage();
      })
      .click(function() {
        removeLightbox();
      })
      .appendTo('#lightbox');
    
    return false;;
  });
});

function positionLightboxImage() {
  var top = ($(window).height() - $('#lightbox').height()) / 2;
  var left = ($(window).width() - $('#lightbox').width()) / 2;
  $('#lightbox')
    .css({
      'top': top + $(document).scrollTop(),
      'left': left,
    })
    .fadeIn();
}

function removeLightbox() {
  $('#overlay, #lightbox')
    .fadeOut('slow', function() {
      $(this).remove();
    });
}