Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment