支援訓練 24日目

  • Lightbox2

jQuery
jQueryのアコーディオンのページ

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>