2012/02/20LightboxはjavascriptとCSSで、ブラウザの同一画面の上に画像を上書きするように表示させるスクリプトです。2」になっているようですね。2同様のスクリプトは数多く存在しますが、その総称は「Lightbox」と呼ばれているのが一般的です。それだけ当初のインパクトが強かったんでしょうね。それぞれ、メリット・デメリットはあるのですが、最近ではもっぱら「colorbox」を使っています。Lightbox導入方法は難しくなく、本サイトやサンプルを見れば簡単に組み込むことができます。「colorbox」なのかを、代表的なスクリプトと比較してみたいと思います。ライブラリは「prototype」か「jQuery」か?スクリプトは代表的なJSライブラリ「prototype」もしくは「jQuery」をベースに構築されています。私はプログラマだったので、個人的にはプラグラムライクな「prototype」派だったのですが、最近の傾向としては「jQuery」の方が断然利用率が高く、世のトレンドのようです。今では、私もほとんど「jQuery」ベースでサイトを構築しています。「Lightbox2」は「prototype」ベースであり、加えてフレームワーク「Scriptaculous」を組み込む必要があります。「prototype」と「jQuery」の共存にはひと工夫必要なので「jQuery」ベースのサイトに組み込む場合は多少のリスクとコストが伴います。これらの理由を考慮して、ベースライブラリを選択するにあたり「jQuery」と「colorbox」という組み合わせで落ち着くことが多いです。(jQueryベースのLightboxもあるようですが。)多種多様なコンテンツの対応について当初、Lightboxでは画像をみせる機能として流行をみせましたが、最近では動画、Flash、外部サイトなど、要望は多様化しています。カスタマイズによっては、一部ライブラリでも対応できるようですが、基本、画像表示のみというスクリプトがほとんどです。そんな中でも「ThickBox」というスクリプトが高機能で、多様なメディアを表示できていましたが、現在その開発は停止しているようで、本サイトでも「colorbox」など他のスクリプトを推奨しています。3.1対応ブラウザLightboxのようなリッチコンテンツを導入するにあたり、「IE6への対応」という問題が毎回つきまといます。ChromeやSafariなどモダンブラウザはもちろん、IEも6、7、8、9に対応しています。IE6を切る捨てる流れが強まってきている一方で、未だIE6対応を要求してくるクライアントも健在なので、制作者にとっては大変助かります。全てのブラウザに対応しているスクリプトでも、CSSの干渉によりサイトによっては崩れが発生することも少なくありません。その点「colorbox」はCSSの切り分けがしっかりしているのか、私の経験ではそのような問題が発生したことはまだありません。「colorbox」は非常にカスタマイズし易いです。本サイトにはデフォルトサンプルとして5つのデザインがありますが、それらをベースにして好みにカスタマイズすることが可能です。Firebugなどを用いてソースを解読しカスタマイズするのですが、コードの可読性が高いです。どのようなデザインであっても、colorboxのカスタマイズでほぼ再現可能でしょう。一方で、過去に「Lightbox」「ThickBox」「ModalBox」などのカスタマイズを試みた事がありますが、悪戦苦闘した経験があります。以上、「Lightbox」についてはこれまでさまざまな案件でいろいろなスクリプトに触れましたが、「colorbox」はまさに決定版といえる存在です。本書は、実践で即役立つテクニックと開発ノウハウ、つまづきやすい・ハマりやすいポイントを徹底解説した「JavaScriptを利用するWebプログラマ必携の逆引き集」です。JavaScript(ECMAScript)の基本構文や新記法といった基礎的な知識から、オブジェクト指向、組み込みオブジェクト、関数、オブジェクト指向構文、DOM、ブラウザーオブジェクトなどの定石・応用テクニック、開発に役立つツール類まで、著者の経験に基づいた実践の場で必ず役立つノウハウ、レシピを提供します。JavaScriptをいまいち使いこなせていないと感じる方や中級レベルに向けてしっかり足場固めをしたい方、JavaScriptをもっと活用したい方などにおすすめの一冊です。アスキー・メディアワークスWeb制作に必要なjQueryの使い方を効率よくしっかり学べる。2.0など最新のトレンドにも対応。サンプルを100本超提供。1.9対応特製チートシート付き。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。inc.Profileサイト「helog」は私がWeb制作に携わるなかでの経験を中心に記しています。前にも発生したんだよなぁ。」といった無駄な時間を省くことを目的に書き始めました。「へ」の「ログ」です。個人的な技術メモのようなものですが、みなさんの何か役に立つことがあればこの上ないです。