先日slimboxを試してみましたが、ThickBox3も試してみました。
ThickBox3もlightboxと同じように画像をかっこよく表示する為のjavascriptのソフトウェアです。
比較的Slimboxより設置は楽です。またMITライセンスですので本家Lightboxより気軽に使うことができます。
Slimboxとの違いをあげてみると
・画像表示時のうにょ～んって感じのエフェクトがない
・エフェクトがない分軽い
・画像をセットで表示する場合のPrev・Nextが下に常に表示されるのでわかりやすい。
・よそのページにライブラリダウンロードに行く必要がないので迷わなくてらくかも。
・画像が画面より大きい場合、画面に合うように縮小して表示される。
・開いた画像をクリックで閉じることができる。
▼設置方法
１．
ThickBox3の公式ページからthickbox.js、thickbox.css、loadingAnimation.gif、query-latest.jsをダウンロードします。
２．
ダウンロードしたファイルを自分のサーバーにアップロードします。アップロードする際
jsファイルはjsというフォルダを作ってその中に、cssファイルはcssというフォルダを作ってその中にgifファイルはimagesというフォルダをつくってその中にアップロードするといいでしょう。
３．
利用したいページにThickBox3を利用する為の定義を追加します。
以下のタグをヘッダに追加します。</head>の直前あたりに入れるといいと思います。
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></script> <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
４．
thickboxを使って表示したい画像のリンクにclass指定でthickboxと追加します。
例：
<a href="CA350541.jpg" css="thickbox" title="にゃーんこ１"><img src="CA350541t.jpg" border=0></a>
これで、実際にリンクをクリックしてみてthickboxで表示さればOKです。
コメントする