gistfile1.js

(function($){
  var Gallery = function(el){
    var self = this;
    var div = $(el);
    var links = div.find("dl a");
    var title;
    var image;

    self.titleText = "<p class='the-title'>Click thumbnail to make image bigger</p><div class='image-placeholder'></div>"

    $("p.the-title span",div).live("click", resetGallery);

    links.click(setupImage);
  
    function setupImage(e){
      
      $("p.the-title", div).html(this.title + "<span>X</span>");
      
      var img = new Image();
      img.onload = function(){
        $('html,body').animate({ scrollTop: title.offset().top }, 1000);
      }
    
      img.src = this.href;
      
      
      $("div.image-placeholder", div).html("<img src='" + img.src + "'/>");      
      findTitle();
     

      e.preventDefault();
    }

    function resetGallery(){
      title.html(self.titleText);
      $("div.image-placeholder img", div).remove();
      findTitle();
    }

    function addTitle(){
      div.append(self.titleText);
      findTitle();
    }

    function findTitle(){
      return title = $("p.the-title", div);
    }
    
    addTitle();
  };
  
  $.fn.gallery = function(){
    return this.each(function(){
      new Gallery(this);
    });
  };
})(jQuery);

$(document).ready(function(){
  $("div.gallery").gallery();
});