支援訓練 24日目
- [JQ]表示・非表示を切り替える
- [JQ]開閉させるアニメーション
- [JQ]トラバース系メソッド
- [JQ]複数の要素から任意の要素を指定
- Lightbox2
index020.html
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <link href="css/common.css" rel="stylesheet" media="all"> <link href="css/style.css" rel="stylesheet" media="all"> </head> <body id="home"> <ul> <li>HOME</li> <li><a href="a.html">A</a></li> <li><a href="b.html">B</a></li> <li><a href="c.html">C</a></li> <li><a href="d.html">D</a></li> </ul> </body> </html>
a.html
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <link href="css/common.css" rel="stylesheet" media="all"> <link href="css/style.css" rel="stylesheet" media="all"> </head> <body id="a"> <ul> <li><a href="index020.html">HOME</a></li> <li>A</li> <li><a href="b.html">B</a></li> <li><a href="c.html">C</a></li> <li><a href="d.htm">D</a></li> </ul> </body> </html>
b.html, c.html, d.htmlは省略。
common.css
@charset "utf-8"; /* CSS Document */ /* HOME*/ body#home { background: #FFF; } /* A */ body#a { background:#3CF; } /* B */ body#b { background: #0C6; } /* C */ body#c { background:#09F; } /* D */ body#d { background:#CF9; }
LightBox 2簡略版
<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <title>Lightbox 2</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link rel="shortcut icon" href="img/demopage/favicon.ico"> <link rel="stylesheet" href="css/lightbox.css" media="screen"/> </head> <body> <div class="wrapper"> <section id="examples" class="section examples-section"> <div class="image-row"> <div class="image-set"> <a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" title="Click on the right side of the image to move forward."><img class="example-image" src="img/demopage/thumb-3.jpg" alt="Plants: image 1 0f 4 thumb" width="150" height="150"/></a> <a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="Plants: image 2 0f 4 thumb" width="150" height="150"/></a> <a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" title="The script preloads the next image in the set as you're viewing."><img class="example-image" src="img/demopage/thumb-5.jpg" alt="Plants: image 3 0f 4 thumb" width="150" height="150"/></a> <a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="Plants: image 4 0f 4 thumb" width="150" height="150"/></a> </div> </div> </section> </div> <script src="js/lightbox-2.6.min.js"></script> </body> </html>