リンク先の画像をプレビューするJavaScript「imgpreview」

かの有名なLightBoxは画像を一回一回大きく表示します。
そんな時間は必要ない、また、まずはちらっと見たいという方にオススメです。
JavaScriptライブラリjQueryのプラグインimgPreviewでは、リンクされている画像をプレビューさせられます。
リンク先の画像をプレビューするJavaScript「imgpreview」

使用方法
imgPreviewからimgpreview.jquery.jsをjQueryからjquery.jsをダウロードします。
<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript" src="imgpreview.jquery.js"></script>
<script type="text/javascript">
$(function(){
$('a').imgPreview({});
});
</script>
あとは、リンク先のパスを画像にすれば完成です。
見た目は以下のようにCSSで変更可能です。
#imgPreviewContainer {
background: #222 url(loading.gif) no-repeat center;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 15px;
display: none;
position: absolute;
z-index: 999;
border: none;
}
#imgPreviewContainer span {
color: white;
font-size: 0.7em;
text-align: center;
display: block;
padding: 10px 0 3px 0;
}
#imgPreviewContainer.loading {
height: 32px;
width: 32px;
}

リンク先の画像をプレビューするJavaScript「imgpreview」

sponsors

「リンク先の画像をプレビューするJavaScript「imgpreview」」をシェアする

記事作成:
記事URL:

TOP > > > リンク先の画像をプレビューするJavaScript「imgpreview」