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

(2006年10月16日 20:58) | 個別ページ | コメント(4) | トラックバック(3)

サムネールをクリックすると同一ウィンドウ上に画像を表示するという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で拡大表示ができると面白いですよね。（拡大された画像のキャプションにエントリーページへのリンクを生成するようにする）こんな感じのカスタマイズができたら何かといいかなと思っています。

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

トラックバック(3)

このブログ記事を参照しているブログ一覧: Highslide JS-サムネール画像を拡大表示するスマートなjavascript

このブログ記事に対するトラックバックURL: http://weblibrary.s224.xrea.com/x/mt/mt-tb.cgi/172

Hybrid Style Design. BLOG - Highslide JS 導入 (2006年11月 5日 06:03)

IE7のリリースでメジャーなブラウザのすべてがタブ機能を持つことになりました。 ... 続きを読む

話題のナレッジベース - Movable Type MTをカスタマイズ『メモメモ』改造日記 (2007年11月18日 14:18)

Movabile Type を使いやすくする改造メモです。イメージファイルのアップロードの際に、border="0" やイメージのセンタリング＜cen... 続きを読む

コメント(4)

Anonymous (2007年3月21日 07:58)

こんにちは

ひとつ質問がありまして、
1.
highslide JS　の最新バージョンを使用すると、画像が表示されてからボーダーと影がもわっ（？）と表示されるカッコイイ表示ができなくなります。

2.
バージョン2.xxを使えば大丈夫なようですが、
それだと今度は
* Inline content
* Iframed content
* Flash content
が使用できなくなります。

1と2を両立させるにはどのようにしたらよいのでしょうか。

スカイ (2007年3月30日 10:29)

＞はじめまして。
ご返事遅くなりすみません。
あれから、何度かバージョンアップしていますね。先ほどサイトを覗いてみてびっくりしました。
最新バージョンを落として使ってみました。
インラインフレームや他のページなどの呼び出し時には、すでに角や影が表示されていますね。
たぶん、私のレベルではちょっと太刀打ちできないかもしれないので、あまり期待しないで欲しいのですが、ちょっといろいろとコード覗いて、試して見ます。

ではでは、これからもｵよろしくお願いします。

タケカワ (2007年8月28日 10:04)

こんにちわ

Highslide JSを使ってMT3からflashを表示させたいと考えてます。

画像をMTからポップアップするサンプルはたくさんあるのすが、Highslide JSのサンプルであるflashのポップアップさせる記述を使ってうまくいきません。

どうしたらよろしいでしょうか。

スカイ (2007年8月28日 19:10)

＞タケカワさん
こんにちは、コメントありがとうございます。
ちょっといろいろと試して見ます。できたら、エントリーにアップします。最近とっても忙しく、時間がかかるかと思いますので、気長にお待ちください。ではでは、今後ともよろしくお願いいたします。

コメントする

ff-logo-big: firefoxロゴ
fmtube_image: ｆmtubesキャッチイメージ
mock.jpg: fm+tubesのモックページ（デザインレイアウト）。最終的にはこのスタイルでマルチブログで展開してみる構想。
mtdeinfo: Movabletypeを勉強するならこのサイト。サンプルファイルもあって、情報も探しやすいです。とてもきれいに情報表示されていて、とても参考になります。
mytumblr: 個人の趣味でのtumblrです。女性のポートレートなんかがおおいです
caputure_contextmenu: tumblr caputureを右クリックコンテキストメニューで選択する
tumblrgallery: tumblrを使ってWEBデザインGalleryを簡単に作ってみました。
psdtuts: http://psdtuts.com/のイメージ画像
designflavor.: http://www.designflavr.com/のイメージ
entrymain_template: ブログ記事の概要は、インデックステンプレート、ブログ記事のリスト（アーカイブテンプレート）、検索結果（システムテンプレート）の3つのテンプレートで共通に使われています。それぞれのテンプレートでの表示内容の違いをイメージに表してみました。

このページは、スカイが2006年10月16日 20:58に書いたブログ記事です。

ひとつ前のブログ記事は「角丸コーナー表示をする方法のリンクサイト-CSS Rounded Corners 'Roundup'」です。

次のブログ記事は「ブラウザの表示幅によって変化するレイアウト Resolution dependent layout」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

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

Highslide JS実装サンプル

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

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

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

CSSに追加するコード

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

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

CSSに追加するコード

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

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

CSSに追加するコード

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

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

CSSに追加するコード

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

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

CSSに追加するコード

CSSカスタマイズ

基本タグ

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

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

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

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

カテゴリ:

タグ:

トラックバック(3)

コメント(4)

コメントする

カテゴリ

月別アーカイブ

最近のコメント

ウェブページ

検索

最近のブログ記事

アイテム

このブログ記事について

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

Highslide JS実装サンプル

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

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

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

CSSに追加するコード

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

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

CSSに追加するコード

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

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

CSSに追加するコード

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

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

CSSに追加するコード

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

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

CSSに追加するコード

CSSカスタマイズ

基本タグ

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

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

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

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

カテゴリ:

タグ:

トラックバック(3)

コメント(4)

コメントする

カテゴリ

月別 アーカイブ

最近のコメント

ウェブページ

検索

最近のブログ記事

アイテム

タグクラウド

このブログ記事について

月別アーカイブ