FC2ブログ
Web Design Tips
紙媒体からWebに転向したデザイナーが「使える!」と思ったTips集です。 HTMLはだいたいOKだけど、PHPとかプログラムは設定いじる程度って方向け。
201807<<12345678910111213141516171819202122232425262728293031>>201809
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ThickBoxを使ってWeb2.0っぽく
「サムネイル画像をクリックすると大きな画像を同ブラウザ上で表示する」ってサイトをよく見るようになりました。
クリックすると別ウィンドウではなく、サムネイルの上に画像ボックスが表示するやつです。

別ウィンドウが開くっていうのは嫌われる傾向にありますし、なによりかっこいいですよねw

たいていはPrototype.jsLightBoxというライブラリを使用しています。
LightBoxってのがWeb2.0っぽい表示をさせるライブラリです。

Prototype.jsはファイルサイズが大きいためにLightBoxを使用するために他の必要ファイルも読み込むと100KB以上になってしまいます。
まぁ、その分いろいろ便利な機能もついてるんですが、ちょっと重すぎ……って思いますね。Javascriptが全部読み込まれる前にサムネイルをクリックすると、思ったように動作してくれませんので遅い回線を使ってる方にとってはイライラさせられるものかもしれません。

そこでサンプルを見てください。
LightBoxを使ってるサイトと似たような感じで表示されますが、これはPrototype.jsを使用していません。

代わりに「jQuery」と「ThickBox」というライブラリを使っています。
必要ファイルのサイズは31KB程ですので、1/3以下になりますね。

ThickBoxLightBoxの違いは様々な形式に対応しているという点も違います。
LightBoxは画像ファイルにしか対応していませんが、ThickBoxHTMLファイルを表示させることもできます
外部ファイルでFlashを貼ったHTMLを読み込むことや、ログインボックスを表示させることができます。
ただ、LightBoxで使える画像のスライドショーには対応してませんので、その場合は外部ファイルでスライドショーのJavascriptを使ったHTMLを用意したりしなければならないですね。

肝心の導入方法です。
必要なのが、jQuaryThickBox.js、ThickBox.css、loadingAnimation.gifですので、それぞれ下記サイトからDownloadします。
ThickBox公式サイト
(jQueryは二つありますが、compressed versionってのは改行やコメントを省いてより軽くしたものです)
サンプルで使っているthickbox.jsthickbox.cssは若干いじってますので注意してください。

loadingAnimation.gifは読み込むHTMLファイルと同じ階層に「images」という名前のフォルダを作って入れてください。
thickbox.js47行目の<img src='images/loadingAnimation.gif' />ってところを絶対パスにしてしまったほうが他のページでも使えて便利かもしれません。

ThickBoxの使い方

<head>~</head>内に
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link href="thickbox.css" rel="stylesheet" type="text/css" />


画像の場合

<a href="大きい画像.jpg" class="thickbox" rel="画像グループの名前" title="キャプション"><img src="サムネイル画像.jpg" alt="" /></a>


rel="画像グループの名前"を設定することで同じ名前のグループの画像をクリックすると「PREV」「NEXT」のボタンが表示されます。

HTMLの場合

<a href="開くファイル名.html?height=縦サイズ&width=横サイズ" title="開くページのタイトル" class="thickbox">HTMLの場合です</a>


HTMLを読み込む場合は読み込むHTMLファイルの文字コードをUTF-8で保存しないと文字化けしてしまうかもしれませんのでご注意を。

下記サイトでも導入の仕方が詳しく載っています。
Thickbox 2.1を導入する | Lyrical Cutie
スポンサーサイト
copyright © 2018 Powered By FC2ブログ allrights reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。