webサイト制作の勉強|1月ブログ

webサイト制作の勉強に関する解説ブログです。

jQueryでのスライド式イメージギャラリー

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スライド式イメージギャラリー</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('#thumbnail a').on('click',function(){
	$('#big_photo img').before('<img src="' + $(this).attr("href") + '" alt="">');
	$('#big_photo img:last').fadeOut('fast',function(){
		$(this).remove();
	});
	return false;
});
});
</script>
</head>

<body>
<div id="container">
<nav id="thumbnail">
<ul>
<li><a href="img/01.png"><img src="img/01_s.png" alt="#"></a></li>
<li><a href="img/02.png"><img src="img/02_s.png" alt="#"></a></li>
<li><a href="img/03.png"><img src="img/03_s.png" alt="#"></a></li>
<li><a href="img/04.png"><img src="img/04_s.png" alt="#"></a></li>
<li><a href="img/05.png"><img src="img/05_s.png" alt="#"></a></li>
<li><a href="img/06.png"><img src="img/06_s.png" alt="#"></a></li>
<li><a href="img/07.png"><img src="img/07_s.png" alt="#"></a></li>
<li><a href="img/08.png"><img src="img/08_s.png" alt="#"></a></li>
</ul>
</nav>
<div id="big_photo">
<P><img src="img/01.png" alt="#"></P>
</div>
</div>

</body>
</html>


レスポンシブ用のスタイルシート

@charset "utf-8";
/* CSS Document */

html,body,h1,p,ul,li {
  margin:0;
  padding:0;
}
ul {
  list-style:none;
}
img {
  border:0;
  vertical-align:bottom;
}

#container {
  width:1270px;
  margin:0 auto;
  overflow:hidden;
  padding-top:5px;
}
#thumbnail {
  width:420px;
  float:left;
  overflow:hidden;
}
#thumbnail li {
  float:left;
  margin:5px;
  width:200px;
  height:150px;
  background:#FFFFFF;
}
#thumbnail li a {
  display:block;
  width:100%;
  height:150px;
}
#thumbnail li a:hover {
  opacity:0.7;
}
#big_photo {
  width:840px;
  height:630px;
  float:left;
  margin:5px;
  position:relative;
}
#big_photo img {
  position:absolute;
}
@media screen and (max-width:1269px) {
  #container {
  width:100%;
  margin:0 auto;
  overflow:hidden;
  padding-top:0.4%;/* 5px ÷ 1270px*/
}
#thumbnail {
  width:33%;/*420px ÷ 1270px*/
}
#thumbnail li {
  float:left;
  margin:1%; /*5px ÷ 420px*/
  width:48%; /*200px ÷ 420px*/
  height:auto;
  background:#FFFFFF;
}
#thumbnail li a {
  display:block;
  width:100%;
  height:auto;
}
#thumbnail li a:hover {
  opacity:0.7;
}
#big_photo {
  width:66.2%; /*840px ÷ 1270px*/
  margin:0.4%;/*5px ÷ 840px 微調整済み*/
}
img {
  max-width:100%;
}
}
@media screen and (max-width:640px) {
#thumbnail {
  width:100%;
  float:none;
  margin-bottom:20px;
}
#thumbnail li {
  text-align:center;
}
#big_photo {
  width:100%;
  margin:0.4%;
  float:none;
}
}