- 2006-01-15 (日)
- Movable Type
拡大画像の表示方法
レイアウトを崩さず大きな画像を表示させようと思ったらサムネイルを作りポップアップか拡大画像へリンクさせる手法があると思います。
ワタシもMTのカスタマイズ等でスクリーンショットを載せることが多いのですがなるべくなら原寸大でわかりやすく表示したい…でもカラム幅を超えてたサイズはレイアウトを崩してしまう…
でも表示が遅かったり邪魔だったりで個人的にポップアップがあまり好きではないので今までは大きな画像へリンクを張るようにしていました。
ほぼ毎週エントリーしているPhotoFridayの写真に関してはカラム幅ギリギリサイズ(幅480px)で表示していますができることならもうちょっと大きなサイズで見てもらいたいなどと勝手に思っていたり…
大きな画像を表示させる方法に関してはどうすることが1番いいのかちょっとだけ悩んでいたりもしてました。
魅せるサムネイル表示
そんなときに「これは!!」と思う方法を発見。
lightbox.js - Web2.0ライクな画像サムネイル生成
各SBMでも爆発していたエントリーなのでご存知の方、もうとっくに試したよって方も多いはず。
かく言う私もこのエントリーをみつけてすぐに試してみたんです。
でも説明通りにやってはみたもののなぜかうまくいかず拡大画像へのリンクへ飛ぶだけのありさま。
画像やscriptへのパスミスという初歩的ミスというわけでもなく後でまたチャレンジしようと諦めたまま2週間が経過してしまいました。
忘れかけていた頃 小粋空間さんでもlightbox.jsについてエントリーがあがっているのを見て再チャレンジしようかという気になりました。
エントリーを読ませていただいたところ各種パスはあってるはずなのになぜか拡大画像へのリンクへと飛んでしまうという以前ワタシがうまくいかなかった状況と同じような??
javascriptについての知識は皆無なのですがスクリプト同士がぶつかっているのかしらという予測はできても解決策まではさっぱりです。
ここは素直に詳しい人の助けを借りることに…
ワタシもできた!lightbox.js
とりあえずメッセ中だった The Rosy Skyの中の人に聞いてみてワタシでもちゃんと設置できました:-)
どんなもんかは以下のサムネイルをクリックしてみてください。
画像をクリックすると画面移動なしにその場で拡大画像が表示され再びクリックすると元に戻ります。
coolでストレスのない魅せ方だと思います。
javascriptをきっている場合は拡大画像へ飛ぶようになっているので表示されないということはありません。
設置方法おさらい
繰り返しになりますがlightbox.jsの設置方法とうまく動かない場合の注意点をざくっと説明します。
1.)必要ファイルの準備 Lightbox JSのDownloadより必要ファイル4つをダウンロードさせていただきます。
- lightbox.js
- lightbox.css
- overlay.png
- loading.gif
UPするところはどこでもいいのですがワタシの場合「lightbox」というフォルダに4つまとめました。
[MTルートディレクトリ]/lightbox/ディレクトリへUPします。
2.)テンプレートの修正
■エントリーの内容が表示されるテンプレートすべての<head>～</head>内に以下を追加します。
インデックス→メインページ
アーカイブ→エントリー・アーカイブ/カテゴリー・アーカイブ/日付アーカイブ
[注意]
lightbox.jsは他のスクリプトとonloadがぶつかっている場合でも最後に読み込むことで正常に動作するようです。
そのへんの詳しいことはわからないのでつっ込まれると困ってしまうんですがとにかく上記の記述はスクリプトの1番最後に追加します。
<body>内にonloadがある場合はlightbox.jsを書き換える必要があるそうです。
もしうまく動かない場合はその点をチェックしてみてください。
■lightbox.cssの内容は短いのでインデックス・テンプレートのスタイルシートにそっくりそのまま追加しました。
画像へのパスは<$MTBlogURL$>lightbox/overlay.pngとしました。
もちろん<head>～</head>内に外部リンクとして追加してもOKです。
3.)サムネイルの設置
lightbox.jsの効果を使うときは拡大画像へのリンクにrel="lightbox"を追加します。
以上で設置は完了です。
今後やってみたいこと
元ネタの OpenStratusの記事ではWordPressでの画像アップロード時に自動でLightbox機能を付随する方法が紹介されています。
ワタシもなんとかMTで応用しようと頑張ってみたのですがなかなかうまくいかず断念。
今使ってる Better File Uploaderというファイルのアップロードを便利にするプラグインのBetterFileUploader.pmを修正するかもともとあるスクリプトを修正するかでMTでも自動でLightbox機能を付随できそうなんですが…
とりあえずサムネイルを表示するときはrel="lightbox"を忘れずつけることにします。
:: TB memo ::
http://openstratus.com/article/52/lightboxjs-web20/
http://www.koikikukan.com/archives/2006/01/13-235556.php
( 2006-01-15 22:29 追記 )
■それでも正常に動作しない場合
・JavaScriptのエラーがでる場合はlightbox.js内のloading.gifへのパスをフルパスに修正することで動くかもしれません。
//Special Thanks//
Thanks, mdnk
- Newer: links for 2006-01-15
- Older: ワタシがblogのネタ探しに活用してるサイト10