skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

かの有名なLightBoxは画像を一回一回大きく表示します。
そんな時間は必要ない、また、まずはちらっと見たいという方にオススメです。
JavaScriptライブラリjQueryのプラグイン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」

記事作成：2009年02月03日

前の記事：JavaScriptで画像を回転させる「Wilq32.RotateImage」
次の記事：スムーズにスクロールするカルーセルJavaScript「Just Another Carousel」