【授業メモ】jQuery モーダルウィンドウ

jQueryによるモーダルウィンドウ

プラグインで作るライトボックス

http://lokeshdhakar.com/projects/lightbox2/

1. ライトボックスからダウンロードし、ライトボックスのサイトを見ながら、必要なファイルと画像（矢印とか）を作成しているフォルダに持ってくる　※minファイルは改行がないデータなので、持ってこない！minファイルでよいのはjQuery本体だけ！！！！！！！！！
2. プラグインは、作った人がcssやjsを作ってくれているが、同じid名を指定しないと自分の方で動かないので同じ属性をつける　
   ※プラグインの画像（矢印とか）はプラグインcssで「images」というフォルダ名になっていたりするので、自分の作ったフォルダ名と合わせないと動かない
3. 以下の順番でリンクさせる

 

 

プラグインのリンクの方法

1. 自分のスタイルシートリンクまたは直接記述（リセットの記述をしたもの）
2. プラグインのスタイルシートリンク
3. jQuery本体のリンク
4. プラグインのjQueryリンク

 

li {

  width: 300px;

  float: left;

  margin: 10px;

}

</style>

<!--プラグインのスタイルシートは必ず自分のスタイルシートリンク（または直接記述）のあとにリンクさせる-->

<link rel="stylesheet" href="css/lightbox.css">

<!--自分のcss→プラグインのcss→jQuery本体リンク→プラグインのjQueryリンクの順番で記述する-->

<script src="js/jquery.min.js"></script>

<script src="js/lightbox.js"></script>

<script>

 

</script>

</head>