Ficando maneiro.. overlay.js

overlay.js

;
(function ($, window, document, undefined) {
  var pluginName = "overlay",
    defaults = {
      'stretch': 'width',
      'scroll': false,
    };

  var Plugin = (function(element, options) {
    this.element = element;
    this.options = $.extend({}, defaults, options);
    this._defaults = defaults;
    this._name = pluginName;
    this.init();
  })

  Plugin.prototype = {
    init: function () {
      if ($('section.overlay').length == 0) {
        Plugin.prototype.overlay = $('<section class="overlay"><section class="preloader">...</section><nav><section class="close"></section><section class="prev"><i></i></section><section class="next"><i></i></section></nav><section class="content"></section><section class="background"></section></section>');
			var $body = $('body');
			var $win = $(window);
        $body.append(Plugin.prototype.overlay);

        var resize;

        $win.resize($.proxy(function () {

          clearTimeout(resize);

          resize = setTimeout($.proxy(function () {
            Plugin.prototype.resize(current.element, current.options)
          }, this), 100);
        }, this));

        Plugin.prototype.overlay.find('section.next').on('click', $.proxy(function () {
          Plugin.prototype.overlay.find('section.close').click();

          next.click();
        }, this));

        Plugin.prototype.overlay.find('section.prev').on('click', $.proxy(function () {
          Plugin.prototype.overlay.find('section.close').click();

          prev.click();
        }, this));

        Plugin.prototype.overlay.find('section.close').on('click', function (e) {
          e.preventDefault();

          Plugin.prototype.overlay.css('display', 'none');

          current = {};

          content = Plugin.prototype.overlay.find('section.content');
          content.html('&nbsp;');
        });
      }

      $(this.element).on('click', $.proxy(function (e) {
        e.preventDefault();

        Plugin.prototype.overlay.css('display', 'inline');
        Plugin.prototype.overlay.find('.preloader').css('display', 'inline');

        current = {};
        current.element = this.element;
        current.options = this.options;

        Plugin.prototype.image = new Image();
        Plugin.prototype.image.src = $(this.element).attr('href');

        Plugin.prototype.image.onload = $.proxy(function () {
          Plugin.prototype.open(this.element, this.options);
        }, this);

      }, this));
    },

    open: function (element, options) {
			var $elem = $(elment).attr('rel');
      if ( elem !== undefined) {
        Plugin.prototype.rel = $('a[rel="' + $elem + '"]');

        var src = $(element).attr('href');

        $(Plugin.prototype.rel).each(function (i, a) {
          if ($(a).attr('href') == src) {
            next = $(Plugin.prototype.rel[i + 1]);
            prev = $(Plugin.prototype.rel[i - 1]);

            if (next.length > 0) {
              Plugin.prototype.overlay.find('section.next').show();
            }
            else {
              Plugin.prototype.overlay.find('section.next').hide();
            }

            if (prev.length > 0) {
              Plugin.prototype.overlay.find('section.prev').show();
            }
            else {
              Plugin.prototype.overlay.find('section.prev').hide();
            }

            return false;
          }
        });
      }
      else {
        Plugin.prototype.rel = [];

        Plugin.prototype.overlay.find('section.next').hide();
        Plugin.prototype.overlay.find('section.prev').hide();
      }

      var content = Plugin.prototype.overlay.find('section.content');

      content.html('<img src="' + Plugin.prototype.image.src + '" />');

      Plugin.prototype.resize(element, options);

      if (options.scroll === true) {
        Plugin.prototype.overlay.css('overflow', 'visible')
      }
      else if (options.scroll === false) {
        Plugin.prototype.overlay.css('overflow', 'hidden')
      }

      Plugin.prototype.overlay.find('.preloader').css('display', 'none');
    },

    resize: function (element, options) {

      var content = Plugin.prototype.overlay.find('section.content');
      content.image = content.find('img');

      if (options.stretch == 'width') {
        new_height = ((Plugin.prototype.image.height / Plugin.prototype.image.width) * $(window).width());

        if (new_height > $(window).height()) {
          content.css({
            'width': $(window).width() + 'px',
            'height': new_height + 'px',
            'left': '0',
            'margin-left': '0',
            'top': '50%',
            'margin-top': '-' + (new_height / 2) + 'px'
          });

          content.image.css({
            'width': '100%',
            'height': new_height + 'px'
          });
        }
        else {
          content.css({
            'width': Plugin.prototype.image.width + 'px',
            'height': Plugin.prototype.image.height + 'px',
            'left': '50%',
            'margin-left': '-' + (Plugin.prototype.image.width / 2) + 'px',
            'top': '50%',
            'margin-top': '-' + (Plugin.prototype.image.height / 2) + 'px'
          });

          content.image.css({
            'width': '100%',
            'height': '100%'
          });
        }
      }
      else if (options.stretch == 'height') {
        new_width = ((Plugin.prototype.image.width / Plugin.prototype.image.height) * $(window).height());

        content.css({
          'width': new_width + 'px',
          'height': $(window).height(),
          'top': '0',
          'margin-top': '0',
          'left': '50%',
          'margin-left': '-' + (new_width / 2) + 'px'
        });

        content.image.css({
          'width': new_width + 'px',
          'height': '100%'
        });
      }
    }
  };

  $.fn[pluginName] = function (options) {
    return this.each(function () {
      if (!$.data(this, "plugin_" + pluginName)) {
        $.data(this, "plugin_" + pluginName, new Plugin(this, options));
      }
    });
  };

})(jQuery, window, document);