画像ポップアッププラグイン

アメブロの画像をクリックすると通常は

「このページ」に移動します。

アップロードした画像の一覧ページが

「このページ」です。

別ページに強制的に飛ばされちゃうってのがイヤな方は･･･

コレをフリープラグインにコピー。

<script src="https://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.7');
</script>
<script>(_JQ17_=jQuery)(function(){$=jQuery=_JQ17_;});</script>
<script src="http://usrcss.ameblo.jp/skin/templates/76/64/10026182002.css"></script>

次に「CSSの編集」で以下をコピペ･･･　ちょっと長いけどいちばん最後に追加でOK。

/*

facebox

*/

#facebox {
position: absolute;
top: 0;
left: 0;
z-index: 100;
text-align: left;
}


#facebox .popup{
position:relative;
border:3px solid rgba(0,0,0,0);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 0 18px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 18px rgba(0,0,0,0.4);
box-shadow:0 0 18px rgba(0,0,0,0.4);
}

#facebox .content {
display:table;
width: 100%;
padding: 10px;
background: #f0f0f0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

#facebox .content iframe,#facebox .content embed,#facebox .content object,#facebox .content img {
opacity:0.9;
-moz-opacity:0.9;
alpha(opacity=90);
}

#facebox .content > p:first-child{
margin-top:0;
}
#facebox .content > p:last-child{
margin-bottom:0;
}

#facebox .close{
position:absolute;
top:0;
right:0;
padding:2px;
background:#f0f0f0;
}
#facebox .close img{
opacity:0.3;
}
#facebox .close:hover img{
opacity:1.0;
}

#facebox .loading {
text-align: center;
}

#facebox .image {
text-align: center;
}

#facebox img {
border: 0;
margin: 0;
}

#facebox_overlay {
position: fixed;
top: 0px;
left: 0px;
height:100%;
width:100%;
}

.facebox_hide {
z-index:-100;
}

.facebox_overlayBG {
background-color: black;
z-index: 99;
opacity:0.7 !important;
-moz-opacity:0.7 !important;
alpha(opacity=70) !important;
}

/*

facebox

*/

「Facebox」っていうJQueryのプラグインを使ってます。

１．Faceboxのスクリプトをアメブロの別ブログのCSSにぶち込む
２．画像をアップした時に強制的に付与されるclassを元にちょこっと細工

やったのはコレだけです。

これで画像をクリックするとオリジナルサイズの画像がポップアップします。

サンプル画像がコレ。思う存分クリックしてください。

画像を閉じたい時は画像右上のバッテン印をクリックするか画像の外側のオーバーレイ（グレーに透過されたエリア）部分をクリックすると元に戻ります。

オーバーレイ部分の濃淡の調整はCSSの最後のほう

.facebox_overlayBG {
background-color: black;
z-index: 99;
opacity:0.7 !important;
-moz-opacity:0.7 !important;
alpha(opacity=70) !important;
}

「opacity:0.7」が透過率です。

この場合は透過率70％の設定です。オーバーレイをちょっと薄め（透過率50%）にしたいってときは

.facebox_overlayBG {
background-color: black;
z-index: 99;
opacity:0.5 !important;
-moz-opacity:0.5 !important;
alpha(opacity=50) !important;
}

これでOK。