イメージギャラリーの作成
左のサムネイル画像をクリックすると、クリックした画像が右側に大きく表示されます。
完成画面
ソースコード
HTML
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<link rel="stylesheet" href="css/style.css">
<script src="../js/jquery-2.2.4.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="container">
<ul id="navi">
<li><a href="img/b1.png"><img src="img/s1.png" alt="花1"></a></li>
<li><a href="img/b2.png"><img src="img/s2.png" alt="花2"></a></li>
<li><a href="img/b3.png"><img src="img/s3.png" alt="花3"></a></li>
<li><a href="img/b4.png"><img src="img/s4.png" alt="花4"></a></li>
</ul>
<div id="main">
<img src="img/b1.png" alt="花1">
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
html,body,p,ul,li {
margin: 0;
padding: 0;
}
ul {
list-style: none;/* マーカーを消す */
}
a {
text-decoration: none;/* 下線を消す */
}
img {
border: 0;/* リンクが設定されたimgにつくborderを消す */
}
img {
vertical-align: bottom;
}
/* Layout
--------------------------------------------*/
body {
background: black;
}
#container {
width: 749px;
height: 400px;
margin: 20px auto;
overflow: hidden;
}
ul {
width: 137px;
height: 400px;
float: left;
}
ul li {
width: 137px;
height: 91px;
margin-bottom: 12px;
}
ul li:last-child {
margin-bottom: 0;
}
ul li a {
display: block;
width: 137px;
height: 91px;
}
#main {
width: 600px;
height: 400px;
margin-left: 12px;
f loat: right;;
}
JS
$(function(){
$('#navi a').on('click',function(){
$('#main img').attr('src',$(this).attr('href'));//href属性を替える
$('#main img').attr('alt',$('img',this).attr('alt'));//alt属性を替える
return false;
});
});
処理を検証してみる
サムネイルの2枚目をクリックすると、
<div id="main">
<img src="img/b2.png" alt="花2">
</div>
となっているのが分かります。
