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

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

highslide.gif

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

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

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

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

Highslide JSをMovable Type(ムーバルタイプ)に導入

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

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

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

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

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

拡大画像の縁をホワイトボーダーで10ピクセル指定・影を付ける場合
各ページのヘッダーに追加するコード
CSSに追加するコード
拡大画像の縁なし・影を付ける場合
各ページのヘッダーに追加するコード
CSSに追加するコード

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

拡大画像の縁をホワイトで指定・コーナーを角丸画像・影付きで表示する場合
各ページのヘッダーに追加するコード

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

CSSに追加するコード

.highslide-imageが他のCSS設定と異なります。

黒背景のデザインなどハイコントラストの表示を選ぶ場合
各ページのヘッダーに追加するコード

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

CSSに追加するコード

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

縁画像なしのパターンを選ぶ場合
各ページのヘッダーに追加するコード

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

CSSに追加するコード

CSSカスタマイズ

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

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

基本タグ

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

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

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

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

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

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

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

拡大画像表示指示ををテキストリンクにて表示する
以下のコードを使うことでこのような表示になります。
Highslide JS 画像を拡大表示します

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

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

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

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

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

各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のリリースでメジャーなブラウザのすべてがタブ機能を持つことになりました。 ... 続きを読む

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

ã??Highslideã?¨ã??ã??JavaScriptã?©ã?¤ã??ã?©ã?ªã??ä?¿ã?£ã?¦æ?®ã??å?ºã??ã?¤ã??ã... 続きを読む

コメント(4)

こんにちは

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

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

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

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

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

こんにちわ

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

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

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

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

コメントする

ウェブページ

   
  

アイテム

  • ff-logo-big

    ff-logo-big: firefoxロゴ

  • fmtube_image

    fmtube_image: fmtubesキャッチイメージ

  • mock.jpg

    mock.jpg: fm+tubesのモックページ(デザインレイアウト)。最終的にはこのスタイルでマルチブログで展開してみる構想。

  • mtdeinfo

    mtdeinfo: Movabletypeを勉強するならこのサイト。サンプルファイルもあって、情報も探しやすいです。とてもきれいに情報表示されていて、とても参考になります。

  • mytumblr

    mytumblr: 個人の趣味でのtumblrです。女性のポートレートなんかがおおいです

  • caputure_contextmenu

    caputure_contextmenu: tumblr caputureを右クリックコンテキストメニューで選択する

  • tumblrgallery

    tumblrgallery: tumblrを使ってWEBデザインGalleryを簡単に作ってみました。

  • psdtuts

    psdtuts: http://psdtuts.com/のイメージ画像

  • designflavor.

    designflavor.: http://www.designflavr.com/のイメージ

  • entrymain_template

    entrymain_template: ブログ記事の概要は、インデックステンプレート、ブログ記事のリスト(アーカイブテンプレート)、検索結果(システムテンプレート)の3つのテンプレートで共通に使われています。それぞれのテンプレートでの表示内容の違いをイメージに表してみました。

このブログ記事について

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

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

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

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