読者です 読者をやめる 読者になる 読者になる

イメージギャラリーの作成

左のサムネイル画像をクリックすると、クリックした画像が右側に大きく表示されます。

完成画面

f:id:develog:20161004004413p:plain

 

ソースコード

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>

となっているのが分かります。

f:id:develog:20161004010356p:plain