SaoriMiyazaki/高さが変わるように：サンプルデモ - レスポンシブギャラリーデモ

## 高さが変わるように：サンプルデモ - レスポンシブギャラリーデモ
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>サンプルデモ - レスポンシブギャラリーデモ</title>
    <meta charset="utf-8">
    <link href="../css/style.css" rel="stylesheet">
    <link href="demo.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script>
        var options = {
            maxWidth : 730,
            thumbMaxWidth : 100,
            thumbMinWidth : 60,
            fade : 500
        };

        $(function(){
            var thumbList = $('#thumbnail').find('a'),
            mainPhoto = $('#main_photo'),
            img = $('<img />'),
            imgHeight;

            $('#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);
            $('#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')
                });
                mainPhoto.find('img').before(photo);

                imgHeight = mainPhoto.find('img').outerHeight();
                mainPhoto.find('img:not(:first)').stop(true, true).fadeOut(options.fade, function(){
                    if( mainPhoto.find('img:first') ){ imgHeight = photo[0].clientHeight; }
                    $(this).remove();
                });

                $(this).parent().addClass('current').siblings().removeClass('current');
                mainPhoto.height(imgHeight);
                return false;
            });

            $(window).on('resize load', function(){
                mainPhoto.height(mainPhoto.find('img').outerHeight());
            });
        });

    </script>
</head>
<body>
    <main class="main">
        <h1 class="page_title">サンプルデモ - レスポンシブギャラリーデモ</h1>
        <div class="content">
            <div id="photo_container">
                <ul id="thumbnail">
                    <li><a href="images/p01.jpg"><img src="images/s/p01.jpg"></a></li>
                    <li><a href="images/p02.jpg"><img src="images/s/p02.jpg"></a></li>
                    <li><a href="images/p03.jpg"><img src="images/s/p03.jpg"></a></li>
                    <li><a href="images/p04.jpg"><img src="images/s/p04.jpg"></a></li>
                    <li><a href="images/p05.jpg"><img src="images/s/p05.jpg"></a></li>
                    <li><a href="images/p06.jpg"><img src="images/s/p06.jpg"></a></li>
                </ul>
                <div id="main_photo"></div>
            </div>
        </div>
    </main>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<title>サンプルデモ - レスポンシブギャラリーデモ</title>
	<meta charset="utf-8">
	<link href="../css/style.css" rel="stylesheet">
	<link href="demo.css" rel="stylesheet">
	<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
	<script>
	var options = {
	maxWidth : 730,
	thumbMaxWidth : 100,
	thumbMinWidth : 60,
	fade : 500
	};

	$(function(){
	var thumbList = $('#thumbnail').find('a'),
	mainPhoto = $('#main_photo'),
	img = $('<img />'),
	imgHeight;

	$('#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);
	$('#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')
	});
	mainPhoto.find('img').before(photo);

	imgHeight = mainPhoto.find('img').outerHeight();
	mainPhoto.find('img:not(:first)').stop(true, true).fadeOut(options.fade, function(){
	if( mainPhoto.find('img:first') ){ imgHeight = photo[0].clientHeight; }
	$(this).remove();
	});

	$(this).parent().addClass('current').siblings().removeClass('current');
	mainPhoto.height(imgHeight);
	return false;
	});

	$(window).on('resize load', function(){
	mainPhoto.height(mainPhoto.find('img').outerHeight());
	});
	});

	</script>
	</head>
	<body>
	<main class="main">
	<h1 class="page_title">サンプルデモ - レスポンシブギャラリーデモ</h1>
	<div class="content">
	<div id="photo_container">
	<ul id="thumbnail">
	<li><a href="images/p01.jpg"><img src="images/s/p01.jpg"></a></li>
	<li><a href="images/p02.jpg"><img src="images/s/p02.jpg"></a></li>
	<li><a href="images/p03.jpg"><img src="images/s/p03.jpg"></a></li>
	<li><a href="images/p04.jpg"><img src="images/s/p04.jpg"></a></li>
	<li><a href="images/p05.jpg"><img src="images/s/p05.jpg"></a></li>
	<li><a href="images/p06.jpg"><img src="images/s/p06.jpg"></a></li>
	</ul>
	<div id="main_photo"></div>
	</div>
	</div>
	</main>
	</body>
	</html>