Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
レスポンシブギャラリー複数設置 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>
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.