画像を拡大表示するJS

目的

muragonのカスタマイズ。

記事に表示される画像サイズは最大640×640pxとなる。
この為、画像をクリック時、muragon登録サイズで拡大表示する。但し、最大画面サイズの80%とする。

Javascript

$(function() {
var zoom =
'<div id=zoom_pic style="' +
'display: block;' +
'position: fixed;' +
'top: 0;' +
'left: 0;' +
'width: 100%;' +
'height: 100%;'+
'background: rgba(0,0,0,0.8);' +
'z-index: 9999;' +
'visibility:hidden' +

'"><img style="' +
'position: absolute;' +
'left: 0;' +
'top: 0;' +
'right: 0;' +
'bottom: 0;' +
'margin: auto;' +
'max-width: 80%;' +
'max-height: 80%;' +
'"/></div>';

$(zoom).appendTo("body");

/* オン */
$(".entry-body-inner img").click(function() {
var url = $(this).attr("src");

/* 登録画像? */
if (url.match(/(\/\/public\.muragon\.com\/)/)) {
url = url.replace(/\/resize\/640x640/,"");
$("#zoom_pic img").attr("src",url);
$("#zoom_pic img").bind("load",function() {
$("#zoom_pic").css("visibility","visible");
});
}
return false;
});

/* オフ */
$("#zoom_pic").click(function() {
$(this).css("visibility","hidden");
return false;
});
});