SaoriMiyazaki/レスポンシブギャラリー複数設置 demo｜memocarilog

## レスポンシブギャラリー複数設置 demo｜memocarilog
<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: 500px;
	}
	.main_photo img{
		position: absolute;
		top:0;
		width: 100%;
	}
</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(){
	$('.photo_container').each(function(){

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

        $( this ).css('maxWidth', options.maxWidth);

        var liWidth = Math.floor((options.thumbMaxWidth / options.maxWidth) * 100);
        $('.thumbnail li', this).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', this).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);
            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">
<h2>ギャラリー1</h2>
<div class="photo_container">
	<!-- .thumbnail -->
	<ul class="thumbnail">
		<li><a href="image/1.jpg"><img src="image/thumb/1.jpg" alt="photo1" /></a></li>
		<li><a href="image/2.jpg"><img src="image/thumb/2.jpg" alt="photo2" /></a></li>
		<li><a href="image/3.jpg"><img src="image/thumb/3.jpg" alt="photo3" /></a></li>
		<li><a href="image/4.jpg"><img src="image/thumb/4.jpg" alt="photo4" /></a></li>
		<li><a href="image/5.jpg"><img src="image/thumb/5.jpg" alt="photo5" /></a></li>
		<li><a href="image/6.jpg"><img src="image/thumb/6.jpg" alt="photo6" /></a></li>
	</ul>
	<!-- /.thumbnail -->

	<!-- .main_photo -->
	<div class="main_photo">
	</div>
	<!-- /.main_photo -->
</div><!-- /.photo_container -->

<h2>ギャラリー2</h2>
<div class="photo_container">
	<!-- .thumbnail -->
	<ul class="thumbnail">
		<li><a href="image/1.jpg"><img src="image/thumb/1.jpg" alt="photo1" /></a></li>
		<li><a href="image/2.jpg"><img src="image/thumb/2.jpg" alt="photo2" /></a></li>
		<li><a href="image/3.jpg"><img src="image/thumb/3.jpg" alt="photo3" /></a></li>
		<li><a href="image/4.jpg"><img src="image/thumb/4.jpg" alt="photo4" /></a></li>
		<li><a href="image/5.jpg"><img src="image/thumb/5.jpg" alt="photo5" /></a></li>
		<li><a href="image/6.jpg"><img src="image/thumb/6.jpg" alt="photo6" /></a></li>
	</ul>
	<!-- /.thumbnail -->

	<!-- .main_photo -->
	<div class="main_photo">
	</div>
	<!-- /.main_photo -->
</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: 500px;
	}
	.main_photo img{
	position: absolute;
	top:0;
	width: 100%;
	}
	</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(){
	$('.photo_container').each(function(){

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

	$( this ).css('maxWidth', options.maxWidth);

	var liWidth = Math.floor((options.thumbMaxWidth / options.maxWidth) * 100);
	$('.thumbnail li', this).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', this).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);
	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">
	<h2>ギャラリー1</h2>
	<div class="photo_container">
	<!-- .thumbnail -->
	<ul class="thumbnail">
	<li><a href="image/1.jpg"><img src="image/thumb/1.jpg" alt="photo1" /></a></li>
	<li><a href="image/2.jpg"><img src="image/thumb/2.jpg" alt="photo2" /></a></li>
	<li><a href="image/3.jpg"><img src="image/thumb/3.jpg" alt="photo3" /></a></li>
	<li><a href="image/4.jpg"><img src="image/thumb/4.jpg" alt="photo4" /></a></li>
	<li><a href="image/5.jpg"><img src="image/thumb/5.jpg" alt="photo5" /></a></li>
	<li><a href="image/6.jpg"><img src="image/thumb/6.jpg" alt="photo6" /></a></li>
	</ul>
	<!-- /.thumbnail -->

	<!-- .main_photo -->
	<div class="main_photo">
	</div>
	<!-- /.main_photo -->
	</div><!-- /.photo_container -->

	<h2>ギャラリー2</h2>
	<div class="photo_container">
	<!-- .thumbnail -->
	<ul class="thumbnail">
	<li><a href="image/1.jpg"><img src="image/thumb/1.jpg" alt="photo1" /></a></li>
	<li><a href="image/2.jpg"><img src="image/thumb/2.jpg" alt="photo2" /></a></li>
	<li><a href="image/3.jpg"><img src="image/thumb/3.jpg" alt="photo3" /></a></li>
	<li><a href="image/4.jpg"><img src="image/thumb/4.jpg" alt="photo4" /></a></li>
	<li><a href="image/5.jpg"><img src="image/thumb/5.jpg" alt="photo5" /></a></li>
	<li><a href="image/6.jpg"><img src="image/thumb/6.jpg" alt="photo6" /></a></li>
	</ul>
	<!-- /.thumbnail -->

	<!-- .main_photo -->
	<div class="main_photo">
	</div>
	<!-- /.main_photo -->
	</div><!-- /.photo_container -->
	</div><!--container-->

	</body>
	</html>