小粋空間  -  a cheap joke and a play on words site

Highslide JS でサムネイル画像を拡大表示する

サムネイル画像をクールに拡大表示する Highslide JS を利用する方法を紹介します。内容は Movable Type をサンプルにしていますが、他のブログ等でも応用できると思います。
WordPress ではプラグイン WPJ-Highslide 0.2 が利用できるみたいです。

とりあえず下記のサンプル画像をクリックしてください。拡大表示された画像の上でクリックすると元に戻ります。

拡大ツールでは、当サイトでも紹介している Lightbox JS が有名ですが、この Highslide JS は下記の特徴があります。

• 拡大画像の下にキャプション（タイトル）の挿入が可能
• ウィンドウサイズに収まるように拡大（右下のアイコンをクリックすると 100% 表示）
• 拡大画像のドラッグが可能

以下、カスタマイズ方法です。

１．ダウンロード

Highslide JS の「Download」のリンクをクリック

A personal website, educational site or other non-commercial use (free). / A commercial or company website ($30). のいずれかをクリックして、「Download Now!」をクリック

２．アップロード

ここではダウンロード時のバージョン 2.2.7 で話を進めます。

解凍した中にある、highslide フォルダを丸ごとアップロードします。同じフォルダにある images / example-xx.html 等は動作には不要ですが、サンプルの動作確認を行いたい場合に必要です（詳細は７項参照）。

３．スクリプトのインクルード設定

リスト 3.1 を </head> の直前に設定します。

<script type="text/javascript" src="http://user-domain/highslide/highslide.js"></script>

リスト 3.1　script 要素

赤色部分はアップロード先のドメインを指定してください。Movable Type の場合は、リスト 3.2 のようにテンプレートタグを利用すると良いでしょう。

<script type="text/javascript" src="<$MTBlogURL$>highslide/highslide.js"></script>

リスト3.2　script 要素（Movable Type の場合）

４．ポップアップ用空要素設定

Highslide JS でポップアップする画像を表示させるための div 空要素を設定します。そして div 要素の id 属性に "highslide-container" を設定します（リスト 4.1）。

<div id="highslide-container"></div>

リスト 4.1　div 要素を body 開始タグ直下に設定

サンプルの説明では「このタグは body 要素の後に直接設定してください」と書かれています。

ちなみに、この div 要素は id 属性つきですので、HTML ページに一つ以上の記述があってはいけません。Movable Type でエントリーにこのタグを記述すると、トップページやアーカイブページで同じ id 属性値が複数存在する可能性があるため、各テンプレートに直接記述してください。

５．タグ設定

５．１ 基本

記事本文中に、次のように （X）HTML タグを記述することで、Highslide JS の機能が有効になります。

まず、サムネイル画像表示用の img タグを書き、それを a タグで括ります。a タグの href 属性には元画像の URL を設定してください。
そして a タグに class 属性 "highslide" と、onclick 属性を追加します（リスト 5.1.1）。

<a href="[画像ファイルのURL]" class="highslide" onclick="return hs.expand(this)">
<img src="[サムネイル画像のURL]" alt="..." />
</a> 

リスト 5.1.1　基本的な設定

設定した class 属性はサムネイル画像用のスタイル設定に利用するためのものです。
なお、ユーザビリティを考慮して onkeypress 属性も追加しておくと良いでしょう（リスト 5.1.2）。

<a href="[画像ファイルのURL]" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)">
<img src="[サムネイル画像のURL]" alt="..." />
</a> 

リスト 5.1.2　onkeypress 属性の追加例

５．２ キャプション（画像のタイトル）を表示する場合

リスト 5.2 の青色部分を追加するとキャプションが表示されます。

<a href="[画像ファイルのURL]" class="highslide" onclick="return hs.expand(this)">
<img src="[サムネイル画像のURL]" alt="..." id="image" />
</a> 
<div class="highslide-caption" id="caption-for-image"><p>タイトル</p></div>

リスト 5.2　キャプションを追加

HighSlide JS のサンプルでは５．１項のタグの下に記述していますが、上に記述しても大丈夫みたいです。

1ページに複数のキャプションつき画像を表示する場合は、画像とキャプションの対応のために、a 要素に id 属性を付与し、キャプション用の div 要素の id 属性名を、対応するネーミングにします。

<a href="[画像ファイルのURL]" id="thumb1" class="highslide" onclick="return hs.expand(this)">
<img src="[サムネイル画像のURL]" alt="..." />
</a> 
<div class="highslide-caption" id="caption-for-thumb1"><p>タイトル</p></div>
 
<a href="[画像ファイルのURL]" id="thumb2" class="highslide" onclick="return hs.expand(this)">
<img src="[サムネイル画像のURL]" alt="..." />
</a> 
<div class="highslide-caption" id="caption-for-thumb2"><p>タイトル</p></div>

５．３ キャプションにコントローラーを追加する場合

複数の画面を制御する場合にコントローラーを追加します（リスト 5.3）。これはキャプション部分に追加する場合です。

<div class='highslide-caption' id='the-caption'>
<a href="javascript:void(0)" onclick="return hs.previous(this)" class="control" style="float:left; display: block">
Previous<br/>
<small style="font-weight: normal; text-transform: none">left arrow key</small></a>
<a href="javascript:void(0)" onclick="return hs.next(this)" class="control" style="float:left; display: block; text-align: right; margin-left: 50px">Next<br/>
<small style="font-weight: normal; text-transform: none">right arrow key</small></a>
<a href="javascript:void(0)" onclick="hs.close(this)" class="control">Close</a>
<a href="javascript:void(0)" class="highslide-move control">Move</a>
<div style="clear:both"></div>
</div>

リスト 5.3　キャプション部分にコントローラー追加

５．２項同様、画像の上下どちらに追加しても動作します。

５．４ 画像内にコントローラーを追加する場合

リスト 5.4 は画像内にコントローラーを追加する場合の設定です。

<div id="controlbar" class="highslide-overlay controlbar">
<a href="javascript:void(0)" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a>
<a href="javascript:void(0)" onclick="return hs.next(this)" title="Next (right arrow key)"></a>
<a href="javascript:void(0)" class="highslide-move" title="Click and drag to move" style="margin-left: 10px"></a>
<a href="javascript:void(0)" onclick="hs.close(this)" title="Close"></a>
</div>

リスト 5.4　画像内にコントローラー追加

６．CSS の設定

最後に CSS（および付随するスクリプト）を設定します。

設定前の予備知識として、HighSlide JS には何パターンかのサンプルが提供されています。サンプルは上記のキャプションやコントローラーの有無に加え、様々なデザインが用意されています。
ここでは、それらの中からとりあえずひとつを選んで設定してみてください。

ということで、やや長くなりますが、HighSlide JS のサンプルで利用されている CSS を全て掲載しておきます。太字タイトルは、７項に記してあるサンプルの各メニュー名に対応しています（間違ってたらすいません）。

注：script タグ内の hs.graphicsDir および CSS の cusor プロパティの URL には ご自身のドメイン（http://～）を追加してください。サンプルでは highslide ディレクトリからパスが開始しているので、このままの状態ではアーカイブページで正常に動作しません。

White 10px border and drop shadow（ボーダー・角・影つき）

script 要素（３項の直後に追加）

<script type="text/javascript">    
    hs.graphicsDir = 'highslide/graphics/';
    window.onload = function() {
        hs.preloadImages(5);
    }
</script>

CSS

.highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
}
.highslide img {
    border: 2px solid gray;
}
.highslide:hover img {
    border: 2px solid white;
}
.highslide-image {
    border: 10px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    border: 5px solid white;
    border-top: none;
    padding: 5px;
    background-color: white;
}
.highslide-loading {
    display: block;
    color: white;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    padding: 3px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background-color: black;
    /*
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
    */
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
    font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}

Drop shadow and no border（ボーダーなし・影つき）

script 要素（３項の直後に追加）

<script type="text/javascript">    
    hs.graphicsDir = 'highslide/graphics/';
    window.onload = function() {
        hs.preloadImages(5);
    }
</script>

CSS

.highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
}
.highslide img {
    border: 2px solid gray;
}
.highslide:hover img {
    border: 2px solid silver;
}
.highslide-image {
    border-bottom: 1px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    border-bottom: 1px solid white;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: silver;
}
.highslide-loading {
    display: block;
    color: white;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    padding: 3px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background-color: black;
    /*
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
    */
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
    font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}

White outline with rounded corners（角丸ボーダー・ドロップシャドウ）

script 要素（３項の直後に追加）

<script type="text/javascript">    
    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = 'rounded-white';
    window.onload = function() {
        hs.preloadImages(5);
    }
</script>

CSS

.highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
}
.highslide img {
    border: 2px solid gray;
}
.highslide:hover img {
    border: 2px solid white;
}
.highslide-image {
    border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    border: 2px solid white;
    border-top: none;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: white;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}
.highslide-loading {
    display: block;
    color: white;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    padding: 3px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background-color: black;
    /*
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
    */
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
    font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}

Dark design with outer glow（ダーク系・ボーダー・ドロップシャドウ）

script 要素（３項の直後に追加）

<script type="text/javascript">    
    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = 'outer-glow';
    window.onload = function() {
        hs.preloadImages(5);
    }
</script>

CSS

.highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
}
.highslide img {
    border: 2px solid gray;
}
.highslide:hover img {
    border: 2px solid white;
}
.highslide-image {
    border: 5px solid #444444;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    border: 5px solid #444444;
    border-top: none;
    padding: 5px;
    background-color: gray;
}
.highslide-loading {
    display: block;
    color: white;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    padding: 3px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background-color: black;
    /*
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
    */
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
    font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}

No graphic outline（アウトラインなし）

script 要素（３項の直後に追加）

<script type="text/javascript">    
    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = null;
    window.onload = function() {
        hs.preloadImages();
    }
</script>

CSS

.highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
}
.highslide img {
    border: 2px solid gray;
}
.highslide:hover img {
    border: 2px solid white;
}
.highslide-image {
    border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    border: 2px solid white;
    border-top: none;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: white;
}
.highslide-loading {
    display: block;
    color: white;
    font-style: 'MS Sans Serif';
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    padding: 3px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background-color: black;
    /*
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
    */
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
    font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}

Slideshow with controls in caption（キャプションにコントローラーつき。角丸ボーダー・影つき）

script 要素（３項の直後に追加）

<script type="text/javascript">    
    hs.graphicsDir = 'highslide/graphics/';
    // Identify a caption for all images. This can also be set inline for each image.
    hs.captionId = 'the-caption';
    hs.outlineType = 'rounded-white';
    window.onload = function() {
        hs.preloadImages(5);
    }
</script>

CSS

.highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
}
.highslide img {
    border: 2px solid gray;
}
.highslide:hover img {
    border: 2px solid white;
}
.highslide-image {
    border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    border: 2px solid white;
    border-top: none;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: white;
}
.highslide-loading {
    display: block;
    color: white;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    padding: 3px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background-color: black;
    /*
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
    */
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
    font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}
.highslide-move {
    cursor: move;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}
.control {
    float: right;
    display: block;
    position: relative;
    margin: 0 5px;
    font-size: 9pt;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 1px;
    margin-bottom: 1px;
}
.control:hover {
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    margin-top: 0;
    margin-bottom: 0;
}
.control, .control * {
    color: #666;
}

Slideshow with a controlbar using custom overlay（画像内にコントローラーつき）

script 要素（３項の直後に追加）

<script type="text/javascript">
    // remove the registerOverlay call to disable the controlbar
    hs.registerOverlay(
        {
            thumbnailId: null,
            overlayId: 'controlbar',
            position: 'bottom left',
            hideOnMouseOut: true,
            opacity: 0.75
        }
    );
    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = 'rounded-white';
    window.onload = function() {
        hs.preloadImages(5);
    }
</script>

CSS

.highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
}
.highslide img {
    border: 2px solid gray;
}
.highslide:hover img {
    border: 2px solid white;
}
.highslide-image {
    border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    border: 2px solid white;
    border-top: none;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: white;
}
.highslide-loading {
    display: block;
    color: white;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    padding: 3px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background-color: black;
    /*
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
    */
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
    font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}
.highslide-move {
    cursor: move;
}
.highslide-overlay {
    display: none;
}
/* Controlbar example */
.controlbar {    
    margin-left: 60px;
    background: url(highslide/graphics/controlbar2.gif);
    width: 210px;
    height: 32px;
}
.controlbar a {    
    display: block;
    float: left;
    margin: 0 0 0 5px;
    height: 30px;
    width: 42px;
}
/* Necessary for functionality */
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}

７．サンプル

ダウンロードしたアーカイブの中にサンプルファイル（下記）があります。

• example-no-border.html （Drop shadow and no border）
• example-no-outline.html （No graphic outline）
• example-outer-glow.html （Dark design with outer glow）
• example-slideshow-captions.html （Slideshow with controls in caption）
• example-slideshow-controlbar.html （Slideshow with a controlbar using custom overlay）
• example-white-10px.html （White 10px border and drop shadow）
• example-white-rounded-outline.html （White outline with rounded corners）

まずはこれらを一緒にアップロードしてお気に入りの動作・スタイルを探しましょう。同じフォルダにある index.htm、image フォルダも忘れずにアップロードしてください。

アップロードした index.htm にアクセスすると、各サンプルのメニューが表示されます（カッコ内がメニュー名）。
また各 html ファイルをエディタで開けば中に設定方法が書かれています。色々お試しください。

2007.01.24
３項の説明を修正しました。

2007.03.18
５．１項の説明を修正しました。

2007.11.13
５．２項に、1ページに複数のキャプション画像を表示する場合の説明を追加しました。