画像の拡大プレビューを超クールに行える「Highslide JS」
2006年10月24日-
スポンサード リンク
Highslide JS - JavaScript thumbnail viewer
Highslide JS, formerly Vevstein Thumbnail Expander, is a piece of JavaScript that streamlines the use of thumbnail images on web pages. The library offers these features and advantages:
画像の拡大プレビューを超クールに行える「Highslide JS」。
サムネイルをクリックするとそのまま画像がズームされ、影付きで写真を表示できます。
設置は次のように行います。
- スクリプトインクルード
<script type="text/javascript" src="highslide/highslide.js"></script> - オブジェクト初期化
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
window.onload = function() {
hs.preloadImages();
}
</script> - CSS定義
- ポップアップ用の空DIV定義
<div id="highslide-container"></div> - サムネイル画像リンク作成。class="highslide" かつ onclick="return hs.expand(this)" をアンカータグの属性に指定。
<a href="images/full-image.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="images/thumbnail.jpg" alt="Highslide JS" id="thumb1"
title="Click to enlarge" height="120" width="107" />
</a>
ダウンロード後のサンプルが充実しているので比較的簡単に設置できるでしょう。
まずはダウンロードしてみましょう。
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 好きな画像や文字を埋め込んだQRコードをリアルタイムで作れるWEBツール
- 約7500種の汎用ピクトグラムアイコン集「Phosphor Icons」
- 過去のエントリ