top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_454

Lightbox JS v2.0 VS ThickBox 3.1 ・・・ 【JavaScript】

 2008-11-12
 すみません!
 さkほど一度投稿したのですが、
 ブラウザテストしている間、
  IE で致命的エラーが出てしまったので、急遽一度閉じ
  対応していました・・・


(ここから、本原稿)
 このサイトでも
 たくさんの 画像(サムネイル)を表示し

  クリックすれば、別ウインドウで、大きな画像を表示する

 投稿をしてきた。
 でも、これって、ねx? 古いよねぇ? イマドキ・・・

 で、ずいぶん前から、何らかのJavaScript

  (最近よく利用される)ポップアップ表示を実装

 しようと、画策していたのだが・・・
 ずっと「忙し忙し」に、おざなりになっていた。

 よし!組み込もう。 さて、何にしよう。
 改めて、
  ・方法論 や
  ・ライブラリ
  ・情報 を調べた
 今回は、有名な2点を まとめてテストしてみよう!

●「元祖」ともいうべき、Lightbox JS v2.0
●HTMLファイルも表示させることができる、ThickBox 3.1

 追記に ▼

FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ


more【サムネイル画像オープン ライブラリ】まとめてテスト

*****************************************************
「元祖」ともいうべき、Lightbox JS v2.0 現在 Version2
*****************************************************

 ホーム:http://www.huddletogether.com/projects/lightbox2/
 ダウンロード:http://www.huddletogether.com/projects/lightbox2/#download
 利用ライブラリ:prototype.js

 使い方:http://www.huddletogether.com/projects/lightbox2/#how

 1:次の3つのJavaScriptファイルを組み込む
   ※例によって head タグ内
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript"
src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

 ※それぞれのファイルを該当の位置にアップロード
  なお、ダウンロード解凍後の
  ・effects.js
  ・builder.js
  も同じ位置におく。
  上記 scriptaculous.js で引数で渡される effects,builder は
  それらをロードする命令を呼び出すことになる

 2:次のCSSファイルを組み込む
<link rel="stylesheet" href="css/lightbox.css"
type="text/css" media="screen" />


 3:利用する画像で、
   画像を囲む hrefタグに rel="lightbox" を加える
<a href="(大きく表示する画像)" rel="lightbox"
title="my caption">(サムネイルで表示する画像)</a>


 4:こうなる!
 例:

 ※なんか、IEで致命的エラーが出てしまったので
  急遽はずしました


 5:感想
   やっぱりこれが一番 簡単でまとまりいいかなぁ。
   これに、「大きい画像がはみ出す」などに 改造対応された
   ・Lightbox JS v2.0 導入しつつ改造 by Fsiki さん
    などの情報もあるので、それらを行えば、万全? かな


*****************************************************
HTMLファイルも表示させることができる、ThickBox 3.1
*****************************************************

 ホーム:http://jquery.com/demo/thickbox/
 ダウンロード:http://jquery.com/demo/thickbox/
 利用ライブラリ:jquery.js

 1:次の2つのJavaScriptファイルを組み込む

   ※例によって head タグ内
<script type="text/javascript"
src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>


 2:次のCSSファイルを組み込む
<link rel="stylesheet"
href="css/thickbox.css" type="text/css" media="screen" />


 3:利用する画像で、
   画像を囲む hrefタグに  class="thickbox" を加える
<a href="(大きく表示する画像)"  class="thickbox"
title="my caption">(サムネイルで表示する画像)</a>


 4:prototype.js と jquery.js を同時に使うと
  FireFox でエラーがでてしまったので、交互に確認だけして ここは割愛

  前述したように
  Lightbox が IE でうまくゆかなかったので、急遽
  このブログでは、こちらを採用! 決断、はや~い。

 こうなる!
 例:創るmetaboy の画面キャプチャ サムネイル


 5:感想
   HTMLファイルまで表示できると言うことで、
   活用方法はいろいろ拡がりそうかな。


で、

 このブログ「創るmetaboy」では、
 ThickBox 3.1 を使わせていただくことにした。

 ※さて、過去の投稿も少しづつ 反映させてゆくかな・・・
commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/454-2eb71b37
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。