jQuery: image popup

gistfile1.txt

/* 
 * jQuery Image Popup
 * Description: small, simple, lightweight image displayer. 
 *
 */

(function( $ ){

  $.fn.popup = function(o) {
    o = $.extend({
      trigger: null,
    },
    o || {});

    var popups = this;

    $(document).bind('keypress', function(e){
      var code = (e.keyCode ? e.keyCode : e.which);      
      if(code == 27){ // close
        $('#image .close').click();
      } else if(code == 190){ // display previous image
        var current = $('#popup').data('current');
        show(current-1);
      } else if(code == 188){ // display next image
        var current = $('#popup').data('current');
        show(current+1);
      }
    });
    $('body').on('click', '.close, #overlay', function() {  // remove #overlay if want to just click X to close
      $('#overlay').fadeOut(function(){ $('#popup').empty(); });
    });

    function show(current) {
      if (current < 0 || current >= popups.length) return;
      
      var trigger = popups.eq(current);
        target = trigger.attr('href');
        caption = trigger.attr('title');

      caption = (caption == '') ? '' : '<p>'+caption+'</p>';
      $('#image').empty();
      $('#image').data('current', current);

      var img = $('<img />').attr('src', target).load(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
          $('#image').append('<p>Error, could not load</p>');
        } else {
          var x = $(window).width() - 50;
          var y = $(window).height() - 50;
          var height = this.height;
          var width = this.width;

          if (width > x) {
            height = height * (x / width);
            $(img).width(x); width = x;
            if (height > y) {
              width = width * (y / height);
              $(img).height(y); height = y;
            }
          } else if (height > y) {
            width = width * (y / height);
            $(img).height(y); height = y;
            if (width > x) {
              height = height * (x / width);
              $(img).width(x); width = x;
            }
          }

          // $('#popup').animate({'width':width,'height':height,'marginTop':(y-height)/2 }, 200, function(){
            // $(this).append(img).append(caption).append('<span class="close"></span>');
          // });
          var top = (y-height)/2;
          top = (top <=20 ) ? 20 : top;
          $('#popup').css({'width':width,'height':height,'marginTop':top })
            .append(img).append(caption).append('<span class="close"></span>');

        }
      });


      $('<span class="prev" />')
        .addClass(function(){ return (!current)?'disabled':'' })
        .appendTo('#popup').click(function() { 
          if (current <= 0) return; 
          $('#popup').empty();
          show(current-1) ;
        });
      $('<span class="next" />')
        .addClass(function(){ return (current >= popups.length-1)?'disabled':'' })
        .appendTo('#popup').click(function() { 
          if (current >= popups.length-1) return;
          $('#popup').empty();
          show(current+1) ;
        });

      return false; 
    }

    return this.each(function(i, pop){
      $(pop).click(function(e){
        e.preventDefault();
        if ( ! $('#overlay').length ) { 
          $('body').append('<div id="overlay" class="no-animation"><div id="popup" class="loading"></div></div>');
        }
        show(i);
        $('#overlay').css({ display:'none' }).fadeIn();
      });
    });

  };

})(jQuery);