Highslide JS-サムネール画像を拡大表示するスマートなjavascript

サムネイル画像を拡大表示するjavascriptのHighslide JSの紹介です。カスタマイズ性にも優れています。表示がスマートでおススメできるjavascriptです。

サムネールをクリックすると同一ウィンドウ上に画像を表示するというjavascriptでLightbox JS・Lightbox が有名かと思います。以前からあまりスマートではないと思っていたら、スマートにしたタイプのHighslide JSが公開されていましたので紹介します。

Highslide JS-サムネールをクリックすると同一ウィンドウ上に画像を表示します。サムネイル画像をワンクリックで拡大画像表示、そして拡大画像をワンクリックでサムネイル画像に戻します。とってもスマートです。Lightbox JSよりも若干ストレスなく画像表示できます。

Highslide JS - JavaScript thumbnail viewer

http://vikjavev.no/highslide/

IE 4.0・Netscape 4.79には対応していませんが、その他の最新ブラウザには対応しています。
拡大された画像の下にキャプションをいれることも可能です。
拡大画像の外枠の指定も4パターンの中から好きなパターンを選べます。
JavaScriptがオフの場合は、そのままイメージ画像が拡大表示されます。
拡大された画像をドラッグドロップで好きな位置に移動できます。

Highslide JS実装サンプル

実際に実装してみるとこんな感じになります。

Highslide JSのサンプルです。そのまま画像をクリックすることでサムネイル表示に戻ります。

拡大画像の縁をホワイトボーダーで10ピクセル指定・影を付けたパターンです。

この画像をドラッグ＆ドロップで好きな位置に移動できます。

Highslide JSをMovable Type（ムーバルタイプ）に導入

Highslide JSからコードをDLして入手します。

highslideフォルダを使用したいブログフォルダへアップロードします。（バイナリーモードで）

各アーカイブなどのページヘッダーに以下のコードを追加します。

拡大画像の縁などの表示変更をいくつかのパターンから選べることができます。変更する場合は、以下のようなコードになります。

各タブをクリックすることでコンテンツが表示されます。

拡大画像の縁をホワイトボーダーで10ピクセル指定・影を付ける場合

各ページのヘッダーに追加するコード

<script type="text/javascript" src="<$MTBlogURL$>highslide/highslide.js"></script>
<script type="text/javascript">    
    hs.graphicsDir = '<$MTBlogURL$>highslide/graphics/';
    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: 10px solid white;
    cursor: pointer; /* opera */
	cursor: url(highslide/graphics/zoomout.cur), pointer;
}
.highslide-image-blur {
    cursor: pointer;
    cursor: hand;
}
.highslide-caption {
    display: none;
    border: 5px solid white;
    border-top: none;
    padding: 5px;
    background-color: white;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}
.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;
	opacity: 0.60; /* w3c */
	filter: alpha(opacity=60); /* ie */
	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;
}

拡大画像の縁なし・影を付ける場合

各ページのヘッダーに追加するコード

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

CSSに追加するコード

上部のパターンとの違いは.highslide-imageの指定が異なります。

.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;
    cursor: pointer; /* opera */
	cursor: url(highslide/graphics/zoomout.cur), pointer;
}
.highslide-image-blur {
    cursor: pointer;
    cursor: hand;
}
.highslide-caption {
    display: none;
    
    border-bottom: 1px solid white;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: silver;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}
.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;
	opacity: 0.60; /* w3c */
	filter: alpha(opacity=60); /* ie */
	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;
}

拡大画像の縁をホワイトで指定・コーナーを角丸画像・影付きで表示する場合

各ページのヘッダーに追加するコード

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

hs.outlineType = 'rounded-white';が追加されています。

CSSに追加するコード

.highslide-imageが他の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 {
    cursor: pointer; /* opera */
	cursor: url(highslide/graphics/zoomout.cur), pointer;
    border: 2px solid white;
}
.highslide-image-blur {
    cursor: pointer;
    cursor: hand;
}
.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-style: 'MS Sans Serif';
	font-size: 9px;
	font-weight: bold;
	text-transform: uppercase;
    text-decoration: none;
	padding: 3px;
	opacity: 0.60; /* w3c */
	filter: alpha(opacity=60); /* ie */
	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;
}

黒背景のデザインなどハイコントラストの表示を選ぶ場合

各ページのヘッダーに追加するコード

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

hs.outlineType = 'outer-glow';が追加されています。

CSSに追加するコード

.highslide-image・.highslide-caption・.highslide-loadingが異なります。

.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;
    cursor: pointer; /* opera */
	cursor: url(highslide/graphics/zoomout.cur), pointer;
}
.highslide-image-blur {
    cursor: pointer;
    cursor: hand;
}
.highslide-caption {
    display: none;
    
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    border: 5px solid #444444;
    border-top: none;
    padding: 5px;
    background-color: gray;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}
.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;
	opacity: 0.60; /* w3c */
	filter: alpha(opacity=60); /* ie */
	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;
}

縁画像なしのパターンを選ぶ場合

各ページのヘッダーに追加するコード

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

hs.outlineType = null;が追加されています。

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 {
	cursor: poiner; /* opera */
	cursor: url(highslide/graphics/zoomout.cur), pointer;
    border: 2px solid white;
}
.highslide-image-blur {
    cursor: pointer;
    cursor: hand;
}
.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-style: 'MS Sans Serif';
	font-size: 9px;
	font-weight: bold;
	text-transform: uppercase;
    text-decoration: none;
	padding: 3px;
	opacity: 0.60; /* w3c */
	filter: alpha(opacity=60); /* ie */
	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;
}

CSSカスタマイズ

独自でCSSを設定する場合には、以下のセレクタの設定を変更することで表示をかえることができます。

.highslide img: サムネイル画像の表示指定を変更する
.highslide-image: 拡大画像の表示指定を変更する
.highslide-caption: キャプション部分の表示を変更する
.highslide-loading: 画像を読みこみの際にサムネイル画像の上に表示されるテキストなどを変更する

基本タグ

<div id="highslide-container"></div>
<a href="イメージ画像ファイルアドレス" class="highslide" onclick="return hs.expand(this)"><img src="イメージ画像ファイルアドレス" alt="Highslide JS" title="この画像をクリックすると拡大表示されます。" width="100" heigh="100" id='thumb1' /></a>

上記のコードのが基本パターンです。

追記(2008/2/20)：注意id属性を指定した要素は、同一ページにおいて一つのみと決まりがありますので、複数画像をhislideJSで動作させる場合でも下記のコードは、ページ上のどこかにひとつあれば、正しく作動します。body要素すぐ後にでも追加させるようにするといいかと思います。
<div id="highslide-container"></div>

キャプションを追加して表示したい場合は以下のコードを上部に追加します。

<div class='highslide-caption' id='caption-for-thumb1'>
<p> 好きなテキストを</p>
</div>

idセレクタにimgタグに指定したセレクタ名を設定する必要があります。

上記のコードの場合、imgタグをid='thumb1'で指定し、キャプションdivブロックにid='caption-for-thumb1'で指定してあります。各イメージ毎に並べて表示してキャプション表示をする場合、id指定を個々に揃えて設定する必要があります。

アクセシビリティを考えて

アクセシビリティを考えて表示する場合は、以下のようなパターンを使うといいです。

拡大画像表示指示ををテキストリンクにて表示する

以下のコードを使うことでこのような表示になります。

画像を拡大表示します

Highslide JSのサンプルです。そのまま画像をクリックすることでサムネイル表示に戻ります。

拡大画像の縁をホワイトボーダーで10ピクセル指定・影を付けたパターンです。

この画像をドラッグ＆ドロップで好きな位置に移動できます。

<div id="highslide-container"></div><img src="イメージ画像ファイルアドレス" alt="Highslide JS" title="この画像をクリックすると拡大表示されます。" width="100" heigh="100" id='thumb1' />
<a href="イメージ画像ファイルアドレス" class="highslide" onclick="return hs.expand(this,{thumbnailId: 'thumb1'})">画像を拡大表示します</a>

クローズテキストリンクを表示する

以下のコードをキャプションブロックに追加することで「閉じる」のテキストリンクを表示できます。

<a href="javascript:hs.closeId('thumb1')">閉じる</a>

各imgのidセレクタ名をcloseId('thumb1')に指定する必要があります。

他にも個々の画像での設定を変更・グループとしていくつかの画像をプレビューできるようにするための「＜前の画像」「次の画像＞」などのページナビゲーションリンクの設置などの解説もあります。

他にもいくつかカスタマイズできる要素が解説されていますので、使いやすいかと思います。

Movable Type（ムーバルタイプ）対応へのカスタマイズ

このHighslide JSがデフォルトですぐに使えるようにMTをカスタマイズしたいところです。mixiのMT関連コミュにも質問トピックを立ち上げています。ファイルのアップロードからHTMLコードの生成でこのHighslide JSの属性を追加することができたら便利ですよね。

生成されるタグのカスタマイズをだれかわかる方がいましたら教えてください。

また、MTRecentImages-2.0とうまく併用することで最近の画像のみのサムネイル表示ブロックも制作できるかと思います。ちょっと試してみようと。トップページにサムネイル画像リストを表示して、Highslide JSで拡大表示ができると面白いですよね。（拡大された画像のキャプションにエントリーページへのリンクを生成するようにする）こんな感じのカスタマイズができたら何かといいかなと思っています。

ちょっと時間をかけて考えてみます。何かいいアイデアがあるようでしたら、コメントやトラックバックお待ちしています。

Highslide JS-サムネール画像を拡大表示するスマートなjavascript

Highslide JS実装サンプル

Highslide JSをMovable Type（ムーバルタイプ）に導入

拡大画像の縁をホワイトボーダーで10ピクセル指定・影を付ける場合

各ページのヘッダーに追加するコード

CSSに追加するコード

拡大画像の縁なし・影を付ける場合

各ページのヘッダーに追加するコード

CSSに追加するコード

拡大画像の縁をホワイトで指定・コーナーを角丸画像・影付きで表示する場合

各ページのヘッダーに追加するコード

CSSに追加するコード

黒背景のデザインなどハイコントラストの表示を選ぶ場合

各ページのヘッダーに追加するコード

CSSに追加するコード

縁画像なしのパターンを選ぶ場合

各ページのヘッダーに追加するコード

CSSに追加するコード

CSSカスタマイズ

基本タグ

アクセシビリティを考えて

拡大画像表示指示ををテキストリンクにて表示する

クローズテキストリンクを表示する

Movable Type（ムーバルタイプ）対応へのカスタマイズ

カテゴリ:

タグ:

関連記事

トラックバック(3)

Highslide JS実装サンプル

人気アクセスランキング

コメント

最近のブログ記事

検索

このブログ記事について

ウェブページ