及川WEB室 >
JavaScript > IE6 no more と Lightbox
IE6 no more と Lightbox
IE6 no more は prototype.js を使用し、Lightboxは jQuery を使用する。jQuery と prototype.js は、JavaScript ライブラリ。
jQuery と prototype.js は競合する。
※jQuery（英語のサイト）。
jQuery: The Write Less, Do More, JavaScript Library
※prototype.js（英語のサイト）。
Prototype JavaScript framework: Easy Ajax and DOM manipulation for dynamic web applications
jQuery と prototype.js を同時に使用する
以下は例として、「IE6 no more の表示」と「Lightbox」を同時に動かす方法を説明していきます。IE6 no more を、prototype.js を使って表示する
及川WEB室サイトはHTML5仕様で書いているため、サイトをご覧になるには最新のブラウザを推奨しています。最新のブラウザでないときちんと表示されない場合が有ります。IE8以下のIEで表示された場合は、最新のブラウザにアップデートするように、ページの最上部に警告（IE6 no more）を表示するようにしています。こんな感じ↓
外部ファイル「ie6_nomore.php」に、警告の表示内容を記述し、
その外部ファイル「ie6_nomore.php」をページ内に読み込んで表示。ファイルを読み込むのに、prototype.js を使用している。
HTML記述例
※外部ファイル「ie6_nomore.php」の中身は下記を参照（英語のサイト）。Code Samples - IE6 No More
※prototype.js は下記のサイトからダウンロードできる（英語のサイト）。
Prototype JavaScript framework: Easy Ajax and DOM manipulation for dynamic web applications
※各スクリプトやCSSファイルへのパスは、ご自分で設置した場所に変えてください。
head内
<!--▼IE6 No More-->
<script language="javascript" type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript"><!--
function ie6nomore(){ new Ajax.Updater($("container"), "js/ie6_nomore.php"); }
window.onload = function() { ie6nomore(); };
--></script>
2行目で、「prototype.js」を読み込む。4行目で、ie6_nomore.phpファイルを読込む関数「ie6nomore()」を記述。
ie6_nomore.php のサンプルファイル
5行目で、ページを開いたときに関数「ie6nomore()」を実行。
body内
<!--旧バージョンのブラウザへの警告--> <!--[if lt IE 9]><div id="container"></div><![endif]-->ie6 nomore のメッセージを表示する箇所に記述する。
「Lightbox」 と「IE6 no more の表示」を同時に動かす
Lightbox は画像をかっこよく表示させるための スクリプト 。Lightbox は jQuery を使用する。
「IE6 no more」の表示には、prototype.js を使用する。
「IE6 no more」と「Lightbox」を同時に動かすようにするため、
「Lightbox」 のスクリプトの呼び出しに、jQueryの"noConflict"を使用する。
こちら↓を参照させて頂きました。ありがとうございます。
prototype.jsと同時に使うには - jQuery日本語リファレンス
jQueryの"noConflict"を使う
※各スクリプトやCSSファイルへのパスは、ご自分で設置した場所に変えてください。head 内
<script></script>1行目で、prototype.js を読み込む。
2行目で、jQuery を読み込む。
3行目～4行目、lightbox 用のファイル。lightbox は jQuery が必要。
6行目～10行目、「jQuery.noConflict();」については下記のサイトを参照してください。
jQuery.noConflict() - jQuery 日本語リファレンス
11行目～13行目で、ie6_nomore.phpファイルを読込む関数「ie6nomore()」を記述。
Ajax.Updater を実行するにはprototype.js が必要。
41行目～16行目で、ページを開いたら関数「ie6nomore()」を実行させる。
body内
<!--旧バージョンのブラウザへの警告--> <!--[if lt IE 9]><div id="container"></div><![endif]-->ie6 nomore のメッセージを表示する箇所に記述する。
注意点：ライブラリを読み込む順番に注意
jQuery を読み込むより先に、prototype.js を読み込む。※各スクリプトやCSSファイルへのパスは、ご自分で設置した場所に変えてください。
・・・省略・・・ ・・・省略・・・ ・・・省略・・・