リンク先の画像をプレビューする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;
}

サンプル

demo

Javascriptサンプルページ一覧

skuare.net