Highslide JS でサムネイル画像をクールにポップアップ

JavaScript

minami

2009.02.20

イメージ

サムネイル画像をクールにポップアップし、ドラッグで動かせる「Highslide JS」をご紹介したいと思います。

This caption can be styled using CSS.

実装

まずはサイトからファイルをダウンロードします。バージョンを選択し『Download now!』ボタンをクリック。遷移したページ内にある Highslide Download 項目から『Yes』をクリックしてファイルを保存します。

解凍したファイルから「highslide」フォルダを、実装するサイトのドキュメントルートにコピー

HTML の<head>～</head>内に以下を記述

<script type="text/javascript" src="highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.wrapperClassName = 'wide-border';
</script>

適用したいサムネイル画像に以下を記述

<div>
<a href="クリックした後の画像URL" class="highslide" onclick="return hs.expand(this)">
<img src="サムネイル時の画像URL" alt="Highslide JS"
title="Click to enlarge" height="サムネイル画像の高さ" width="サムネイル画像の幅" /></a>


<div class="highslide-caption">
ここに記述するとポップアップ時に表示されます。
</div>
</div>

これでオッケーです。

その他にも 5 パターンあり、ダウンロードしたフォルダにサンプルが入っています。設置方法も HTML にコメントで書いてありますので、興味がある人はお試しあれ！