超軽量画像モーダル系jQueryプラグイン

いわゆるLightboxみたいな感じで、

でもいろんな機能とか、派手なアニメーションはいらない。

あとスライドショーもいらない。

ほんっと画像をオーバーレイで表示させるだけ！

っていうか、画像ファイルとか、CSSまで読込みたくない！

そんなシンプルなプラグインを探したけどなかったので作ってみました。

単なる手抜きでもありますが良く言えば軽量！

(function($) {
 $.fn.imgModal = function() {
  $(this).click(function(e) {
   if(navigator.userAgent.match(/msie [6.|7.|8.]/i)) return;
   e.preventDefault();
   var that = this;
   var $loading = $('<div>').text('Loading...').attr('style', 'font-family: Helvetica,Arial; font-size: 17px; color: #eee; text-align: center; position: relative; top: 50%;');
   var $div = $('<div>').attr('style', 'z-index: 100; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.4); display: none;')
    .on('click', function() { $(this).fadeOut('fast', function(){ $(this).remove() } )})
    .append($loading)
    .appendTo($('body'))
    .fadeIn('fast', function() {
     $('<img>').on('load', function() {
      $(this).fadeIn('slow', function() { $loading.remove() });
     })
     .attr('style', 'max-width : ' + (window.innerWidth - 50) + 'px; max-height: ' + (window.innerHeight - 50) + 'px; width: auto; height: auto; display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 5px;')
     .attr('src', that.href)
     .appendTo($div)
    });
  });
 };
})(jQuery);

IE8以下は切りました。手抜きです。

画像が大きい場合ウィンドウサイズによって縮小されるので

ブラウザによって少々画像が荒くなります、、

それとイベントの設定にonを使用しているのでjQuery1.7未満ですと動きません！



そんで以下で実行。引数はありません。

単純明快、シンプルに。

$(function() {
 $('a[rel="imgModal"]').imgModal();
});

アンカーのrel属性にimgModalを入れればOK。

<a rel="imgModal" href="http://www.example.com/test.jpg">img</a>

よかったらご利用ください。

DEMO