TopJavaScript > 2007年1月
2007年1月18日

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

January 18,2007 12:51 AM
Tag:[, , ]
Permalink

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

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

Highslide JS

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

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

以下、カスタマイズ方法です。ここではダウンロード時のバージョン 2.2.74.0.6 で話を進めます。

1.ダウンロード

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

Highslide JS のサイト

バージョンを選択して「Download Now!」をクリック

Highslide JS ダウンロードバージョン選択

商用の場合は購入、非商用の場合はドネーションの有無を選択して、「Highslide Download」の Yes をクリック。

Highslide JS ダウンロード

2.アップロード

解凍した中にある、highslide フォルダを丸ごとアップロードします。Movable Type の場合はブログディレクトリ(ブログのトップページとなる index.html が出力されるディレクトリ)にアップロードした手順で説明します。

highslide フォルダと同じ階層にある images / example-xx.html 等はアップロード不要ですが、サンプルの動作確認を行いたい場合はアップロードしてください(詳細は7項参照)。

3.スクリプトのインクルード設定

次の script 要素を </head> の直前に設定します。Movable Type 3 の場合は head 要素が記述されている各テンプレートに設定してください。Movable Type 4 では、head 要素部分がモジュール化(部品化)されているため、次のテンプレートに設定してください。

  • MT4.0~4.1x のデフォルトテンプレート:「ヘッダー」テンプレートモジュール
  • MT4.2x~ のデフォルトテンプレート:「HTMLヘッダー」テンプレートモジュール(テンプレート内に head 要素はありませんが問題ありません)
  • MT4.x~ の小粋空間テンプレート:「ヘッダー」テンプレートモジュール
<script type="text/javascript" src="http://user-domain/highslide/highslide.js"></script>

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

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

4.ポップアップ用空要素設定

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

注:HighSlide の最新バージョンではこの設定は不要です。

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

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

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

5.タグ設定

5.1 基本

記事本文中に、次のように (X)HTML 要素を記述することで、Highslide JS の機能が有効になります。

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

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

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

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

5.2 キャプション(画像のタイトル)を表示する場合

下のリストのように、青色部分を追加すればキャプションが表示されます。

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

キャプションは a 要素の直後に記述し、キャプションを括る要素に class="highslide-caption" を追加してください(div 要素でなくても大丈夫です)。
また、1ページに複数の画像がある場合でも、追加したキャプションは直前の画像に対応づけられます。

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.2項同様、画像の下に追加してください。

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

注:この項目は過去の Highslide バージョンのものです

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

<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>

6.script 要素と CSS の設定

最後に、デザインを設定するための script 要素と CSS を設定します。script 要素は3項で設定した script 要素の直後に、CSS はスタイルシートにそれぞれ追加してください。

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

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

注:script 要素内の hs.graphicsDir および CSS の cusor プロパティの URL には ご自身のドメイン(http://~)を追加してください。サンプルでは highslide ディレクトリからパスが開始しているので、このままの状態では highslide ディレクトリと異なるパスにあるページで正常に動作しません。

最低限必要な設定(MT4の設定例)

ズームを全ページで有効にするためのパスの設定と、画像のローディング画像、ズームイン時、および画像を最大化するとき(ブラウザの幅が画像の最大幅より小さい時に表示)のポインタを表示します。

script 要素(3項の直後に追加)

<script type="text/javascript">    
    hs.graphicsDir = '<$MTBlogURL$>highslide/graphics/';
</script>

CSS

.highslide {
    cursor: url(<$MTBlogURL$>highslide/graphics/zoomin.cur), pointer;
}
.highslide-loading {
    display: block;
    color: black;
    font-size: 8pt;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    padding: 2px;
    border: 1px solid black;
    background-color: white;
    padding-left: 22px;
    background-image: url(<$MTBlogURL$>highslide/graphics/loader.white.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
}
a.highslide-full-expand {
    background: url(<$MTBlogURL$>highslide/graphics/fullexpand.gif) no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
}
White 10px border and drop shadow(ボーダー・角・影つき)

ボーダー・角・影つき

script 要素(3項の直後に追加)

<script type="text/javascript">    
    hs.graphicsDir = 'highslide/graphics/';
</script>

CSS

.highslide-wrapper div {
    font-family: Verdana, Helvetica;
    font-size: 10pt;
}
.highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
    text-decoration: none;
}
.highslide-active-anchor img {
    visibility: hidden;
}
.highslide-wrapper, .drop-shadow {
    background: white;
}
.highslide img {
    border: 2px solid gray;
}
.highslide:hover img {
    border: 2px solid white;
}
.highslide-wrapper {
    background: 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: black;
    font-size: 8pt;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    padding: 2px;
    border: 1px solid black;
    background-color: white;
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.white.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;
}
a.highslide-full-expand {
    background: url(highslide/graphics/fullexpand.gif) no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
}
Drop shadow and no border(ボーダーなし・影つき)

ボーダーなし・影つき

script 要素(3項の直後に追加)

<script type="text/javascript">    
hs.graphicsDir = 'highslide/graphics/';
</script>

CSS

.highslide-wrapper div {
    font-family: Verdana, Helvetica;
    font-size: 10pt;
}
.highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
    text-decoration: none;
}
.highslide-active-anchor img {
    visibility: hidden;
}
.highslide img {
    border: 2px solid gray;
}
.highslide:hover img {
    border-color: silver;
}
.highslide-wrapper, .drop-shadow {
    background: white;
}
.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: black;
    font-size: 8pt;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    padding: 2px;
    border: 1px solid black;
    background-color: white;
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.white.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;
}
a.highslide-full-expand {
    background: url(highslide/graphics/fullexpand.gif) no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
}
.highslide-overlay {
    display: none;
}
White outline with rounded corners(角丸ボーダー・ドロップシャドウ)

角丸ボーダー・ドロップシャドウ

script 要素(3項の直後に追加)

<script type="text/javascript">    
    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = 'rounded-white';
</script>

CSS

.highslide-wrapper div {
    font-family: Verdana, Helvetica;
    font-size: 10pt;
}
.highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
    text-decoration: none;
}
.highslide-active-anchor img {
    visibility: hidden;
}
.highslide img {
    border: 2px solid gray;
}
.highslide:hover img {
    border: 2px solid white;
}
.highslide-wrapper, .rounded-white {
    background: 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: black;
    font-size: 8pt;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    padding: 2px;
    border: 1px solid black;
    background-color: white;
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.white.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;
}
a.highslide-full-expand {
    background: url(highslide/graphics/fullexpand.gif) no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
}
Dark design with outer glow(ダーク系・ボーダー・ドロップシャドウ)

ダーク系・ボーダー・ドロップシャドウ

script 要素(3項の直後に追加)

<script type="text/javascript">    
    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = 'outer-glow';
</script>

CSS

.highslide-wrapper div {
    font-family: Verdana, Helvetica;
    font-size: 10pt;
}
.highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
    text-decoration: none;
}
.highslide img {
    border: 2px solid gray;
}
.highslide-active-anchor img {
    visibility: hidden;
}
.highslide:hover img {
    border: 2px solid white;
}
.highslide-wrapper, .outer-glow {
    background: #444;
}
.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;
}
a.highslide-full-expand {
    background: url(highslide/graphics/fullexpand.gif) no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
}
No graphic outline(アウトラインなし)

アウトラインなし

script 要素(3項の直後に追加)

<script type="text/javascript">    
    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = null;
</script>

CSS

.highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
    text-decoration: none;
}
.highslide-active-anchor img {
    visibility: hidden;
}
.highslide img {
    border: 2px solid gray;
}
.highslide:hover img {
    border: 2px solid white;
}
.highslide-wrapper {
    background: 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: black;
    font-size: 8pt;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    padding: 2px;
    border: 1px solid black;
    background-color: white;
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.white.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;
}
a.highslide-full-expand {
    background: url(highslide/graphics/fullexpand.gif) no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
}

7.サンプル

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

  • example-white-10px.html (White 10px border and drop shadow)
  • example-no-border.html (Drop shadow and no border)
  • example-white-rounded-outline.html (White outline with rounded corners)
  • example-outer-glow.html (Dark design with outer glow)
  • example-no-outline.html (No graphic outline)

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

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

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

2007.03.18
5.1項の説明を修正しました。

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

2008.10.09
HIghSlide 4.0.6 を元にデータを修正しました。また、Movable Type 4 に適用する場合の記述を追加しました。

2010.03.28
説明を一部修正しました。

Comments [97] | Trackbacks [37]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3