Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>レスポンシブギャラリー(キャプション付き)デモ|memocarilog</title>
<link rel="stylesheet" href="../demo_style.css" media="screen, projection, print">
<style type="text/css">
#container{
margin: 0 auto;
max-width: 550px;
}
#thumbnail{
overflow: hidden;
margin: 0 0 10px;
padding: 0 3% ;
width: 100%;
}
#thumbnail li{
float: left;
margin-right: 5px;
margin-bottom: 5px;
list-style: none;
}
#thumbnail li:last-child{
margin-right: 0;
}
#thumbnail li img{
width: 100%;
opacity: 0.5;
filter: alpha(opacity=50);
}
#thumbnail li.current img{
opacity: 1;
filter: alpha(opacity=100);
}
#main_photo{
position: relative;
border: solid 15px #fff;
box-shadow: 0 1px 8px #bbb;
height: 490px;
}
#main_photo img{
position: absolute;
top:0;
width: 100%;
}
#caption{
padding: 10px 0;
text-align: center;
font-style: italic;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var options = {
maxWidth : 520,
thumbMaxWidth : 80,
thumbMinWidth : 65,
fade : 500
};
$(function(){
var thumbList = $('#thumbnail').find('a'),
mainPhoto = $('#main_photo'),
img = $('<img />'),
imgHeight,
// ↓ キャプションに関する変数を追加
caption = $('#caption'),
captionText;
$('#photo_container').css('maxWidth', options.maxWidth);
var liWidth = Math.floor((options.thumbMaxWidth / options.maxWidth) * 100);
$('#thumbnail li').css({
width : liWidth + '%',
maxWidth : options.thumbMaxWidth,
minWidth : options.thumbMinWidth
});
img = img.attr({
src: $(thumbList[0]).attr('href'),
alt: $(thumbList[0]).find('img').attr('alt')
});
mainPhoto.append(img);
// 最初のキャプション取得と挿入
captionText = $(thumbList[0]).find('img').attr('data-caption');
caption.text(captionText);
$('#thumbnail li:first').addClass('current');
for(var i = 0; i < thumbList.length; i++){
$('<img />').attr({
src: $(thumbList[i]).attr('href'),
alt: $(thumbList[i]).find('img').attr('alt')
});
}
thumbList.on('click', function(){
var photo = $('<img />').attr({
src: $(this).attr('href'),
alt: $(this).find('img').attr('alt')
});
// キャプション入れ替える
caption.text($(this).find('img').attr('data-caption'));
mainPhoto.find('img').before(photo);
mainPhoto.find('img:not(:first)').stop(true, true).fadeOut(options.fade, function(){
$(this).remove();
});
$(this).parent().addClass('current').siblings().removeClass('current');
mainPhoto.height(photo.outerHeight());
return false;
});
$(window).on('resize load', function(){
mainPhoto.height(mainPhoto.find('img').outerHeight());
});
});
</script>
</head>
<body>
<h1>レスポンシブギャラリー demo(キャプション付き)|memocarilog</h1>
<div id="container">
<div id="photo_container">
<!-- #thumbnail -->
<ul id="thumbnail">
<li><a href="image/1.jpg"><img src="image/thumb/1.jpg" alt="photo1" data-caption="1. ナッツの瓶詰め" /></a></li>
<li><a href="image/2.jpg"><img src="image/thumb/2.jpg" alt="photo2" data-caption="2. 猫とおじいさん" /></a></li>
<li><a href="image/3.jpg"><img src="image/thumb/3.jpg" alt="photo3" data-caption="3. ハンバーガー" /></a></li>
<li><a href="image/4.jpg"><img src="image/thumb/4.jpg" alt="photo4" data-caption="4. しましまの猫" /></a></li>
<li><a href="image/5.jpg"><img src="image/thumb/5.jpg" alt="photo5" data-caption="5. 白い猫" /></a></li>
<li><a href="image/6.jpg"><img src="image/thumb/6.jpg" alt="photo6" data-caption="6. ケーキ" /></a></li>
</ul>
<!-- /#thumbnail -->
<!-- #main_photo -->
<div id="main_photo">
</div>
<!-- #caption -->
<p id="caption"></p>
</div><!-- /#photo_container -->
</div><!--container-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.