SaoriMiyazaki/sample2_caption.html

## sample2_caption.html
<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>
	<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>