及川WEB室|ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川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 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ファイルへのパスは、ご自分で設置した場所に変えてください。
・・・省略・・・

・・・省略・・・

・・・省略・・・
以上。
MENU Ξ