필터기능이 있는 masonty 질문좀 드릴게요....
본문
masonry 연습하면서 라이트박스와 필터가 있는 기능을 조합해서 연습을 하고 있는데요...
문제는 그냥 masonry + 라이트박스를 이용하면 잘되는데...여기에 필터기능을 넣어서 하면
masonry가 매끄럽게 연결이 안되고 꼭 이빨 빠진것처럼 되는데...어떻게 해야 하는지요...ㅠㅠ;
아래사진처럼....첫번째가 필터가 있는 것인데...masonry가 꼭 이빨 빠진것 처럼 보기가 않좋아요.
두번째 이미지처럼...매끄럽게 이어지게 하려면 어떻게 해야하는지요...
1. masonry + lightbox + filter기능이 조합된것인데 샘플로 몇개사진만 사이즈를 틀리게 했는데 이빨 빠진듯 보기 않좋게 나옵니다.
2. masonry + lightbox 이거는 매끄럽게 나오는데 1번도 2번처럼 나오게 할수없는지요
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->
<title>test</title>
<!-- 부트스트랩 -->
<!--<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> -->
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="../../부트스트랩 테스트/lightbox2-master/lightbox2-master/dist/css/lightbox.css" rel="stylesheet">
<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
<!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
/* body{margin-left:30px; margin-right:30px;} */
/* 미소너리 시작 */
* { box-sizing: border-box; }
/* force scrollbar */
html { overflow-y: scroll; }
body { font-family: sans-serif; }
/* ---- grid ---- */
.grid, .masonry-1 {
background: #fff;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
width: 33.333%;
padding:0.5%;
}
.grid-item {
float: left;
}
.grid-item img {
display: block;
max-width: 100%;
}
/* 미소너리 끝 */
/* 포트폴리오 버튼 START */
.btn {
color:#9e9e9e;
background-color:#fff;
border:#eeeeee 1px solid ;
border-radius: 0px;
}
.btn:hover,
.btn:focus,
.btn.focus {
color: #fff;
background-color:#CDDC39;
text-decoration: none;
}
.btn:active,
.btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow:none;
box-shadow:none;
}
/* 포트폴리오 버튼 END */
/* 포트폴리오 시작 */
/* 포트폴리오 끝 */
</style>
</head>
<body>
<!---- 폴트폴리오 시작 START -->
<!-- 미셔너리 DVD start -->
<div class="container masonry" style="margin-top:30px;">
<div id="portfolio-1"> <!-- 1 -->
<div align="left"> <!-- 2 -->
<button class="btn filter-button" data-filter="all">All</button>
<button class="btn filter-button" data-filter="room1">에르메스</button>
<button class="btn filter-button" data-filter="room2">안나수이</button>
<button class="btn filter-button" data-filter="room3">샤넬</button>
<button class="btn filter-button" data-filter="room4">토즈</button>
<button class="btn filter-button" data-filter="room5">에트로</button>
<button class="btn filter-button" data-filter="room6">빅토리아시크릿</button>
<button class="btn filter-button" data-filter="room7">팬디</button>
<button class="btn filter-button" data-filter="room8">플로렌스</button>
</div> <!-- 2 -->
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item item gallery_product filter room1">
<a href="../room1-1.gif" data-lightbox="roadtrip-room1" data-title="에르메스">
<img src="../room1-1.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room1">
<a href="../room1-2.gif" data-lightbox="roadtrip-room1" data-title="에르메스">
<img src="../room1-2.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room1">
<a href="../room1-3.gif" data-lightbox="roadtrip-room1" data-title="에르메스">
<img src="../room1-3.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room1">
<a href="../room1-4.gif" data-lightbox="roadtrip-room1" data-title="에르메스">
<img src="../room1-4.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room1">
<a href="../room1-5.gif" data-lightbox="roadtrip-room1" data-title="에르메스">
<img src="../room1-5.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room2">
<a href="../image/room2-1.gif" data-lightbox="roadtrip-room2" data-title="안나수이">
<img src="../image/room2-1.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room2">
<a href="../image/room2-2.gif" data-lightbox="roadtrip-room2" data-title="안나수이">
<img src="../image/room2-2.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room2">
<a href="../image/room2-3.gif" data-lightbox="roadtrip-room2" data-title="안나수이">
<img src="../image/room2-3.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room2">
<a href="../image/room2-4.gif" data-lightbox="roadtrip-room2" data-title="안나수이">
<img src="../image/room2-4.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room3">
<a href="../image/room3-1.gif" data-lightbox="roadtrip-room3" data-title="샤넬">
<img src="../image/room3-1.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room3">
<a href="../image/room3-2.gif" data-lightbox="roadtrip-room3" data-title="샤넬">
<img src="../image/room3-2.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room3">
<a href="../image/room3-3.gif" data-lightbox="roadtrip-room3" data-title="샤넬">
<img src="../image/room3-3.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room3">
<a href="../image/room3-4.gif" data-lightbox="roadtrip-room3" data-title="샤넬">
<img src="../image/room3-4.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room3">
<a href="../image/room3-5.gif" data-lightbox="roadtrip-room3" data-title="샤넬">
<img src="../image/room3-5.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room3">
<a href="../image/room3-6.gif" data-lightbox="roadtrip-room3" data-title="샤넬">
<img src="../image/room3-6.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room3">
<a href="../image/room3-7.gif" data-lightbox="roadtrip-room3" data-title="샤넬">
<img src="../image/room3-7.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room4">
<a href="../image/room4-1.gif" data-lightbox="roadtrip-room4" data-title="토즈">
<img src="../image/room4-1.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room4">
<a href="../image/room4-2.gif" data-lightbox="roadtrip-room4" data-title="토즈">
<img src="../image/room4-2.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room4">
<a href="../image/room4-3.gif" data-lightbox="roadtrip-room4" data-title="토즈">
<img src="../image/room4-3.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room4">
<a href="../image/room4-4.gif" data-lightbox="roadtrip-room4" data-title="토즈">
<img src="../image/room4-4.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room4">
<a href="../image/room4-5.gif" data-lightbox="roadtrip-room4" data-title="토즈">
<img src="../image/room4-5.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room5">
<a href="../image/room5-1.gif" data-lightbox="roadtrip-room5" data-title="에트로">
<img src="../image/room5-1.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room5">
<a href="../image/room5-2.gif" data-lightbox="roadtrip-room5" data-title="에트로">
<img src="../image/room5-2.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room5">
<a href="../image/room5-3.gif" data-lightbox="roadtrip-room5" data-title="에트로">
<img src="../image/room5-3.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room5">
<a href="../image/room5-4.gif" data-lightbox="roadtrip-room5" data-title="에트로">
<img src="../image/room5-4.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room6">
<a href="../image/room6-1.gif" data-lightbox="roadtrip-room6" data-title="빅토리아시크릿">
<img src="../image/room6-1.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room6">
<a href="../image/room6-2.gif" data-lightbox="roadtrip-room6" data-title="빅토리아시크릿">
<img src="../image/room6-2.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room6">
<a href="../image/room6-3.gif" data-lightbox="roadtrip-room6" data-title="빅토리아시크릿">
<img src="../image/room6-3.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room6">
<a href="../image/room6-4.gif" data-lightbox="roadtrip-room6" data-title="빅토리아시크릿">
<img src="../image/room6-4.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room6">
<a href="../image/room6-5.gif" data-lightbox="roadtrip-room6" data-title="빅토리아시크릿">
<img src="../image/room6-5.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room6">
<a href="../image/room6-6.gif" data-lightbox="roadtrip-room6" data-title="빅토리아시크릿">
<img src="../image/room6-6.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room6">
<a href="../image/room6-7.gif" data-lightbox="roadtrip-room6" data-title="빅토리아시크릿">
<img src="../image/room6-7.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room7">
<a href="../image/room7-1.gif" data-lightbox="roadtrip-room7" data-title="팬디">
<img src="../image/room7-1.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room7">
<a href="../image/room7-2.gif" data-lightbox="roadtrip-room7" data-title="팬디">
<img src="../image/room7-2.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room7">
<a href="../image/room7-3.gif" data-lightbox="roadtrip-room7" data-title="팬디">
<img src="../image/room7-3.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room7">
<a href="../image/room7-4.gif" data-lightbox="roadtrip-room7" data-title="팬디">
<img src="../image/room7-4.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room7">
<a href="../image/room7-5.gif" data-lightbox="roadtrip-room7" data-title="팬디">
<img src="../image/room7-5.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room7">
<a href="../image/room7-6.gif" data-lightbox="roadtrip-room7" data-title="팬디">
<img src="../image/room7-6.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room8">
<a href="../image/room8-1.gif" data-lightbox="roadtrip-room8" data-title="플로렌스">
<img src="../image/room8-1.gif" />
</a>
</div>
<div class="grid-item item gallery_product filter room8">
<a href="../image/room8-2.gif" data-lightbox="roadtrip-room8" data-title="플로렌스">
<img src="../image/room8-2.gif" />
</a>
</div> <div class="grid-item item gallery_product filter room8">
<a href="../image/room8-3.gif" data-lightbox="roadtrip-room8" data-title="플로렌스">
<img src="../image/room8-3.gif" />
</a>
</div> <div class="grid-item item gallery_product filter room8">
<a href="../image/room8-4.gif" data-lightbox="roadtrip-room8" data-title="플로렌스">
<img src="../image/room8-4.gif" />
</a>
</div> <div class="grid-item item gallery_product filter room8">
<a href="../image/room8-5.gif" data-lightbox="roadtrip-room8" data-title="플로렌스">
<img src="../image/room8-5.gif" />
</a>
</div> <div class="grid-item item gallery_product filter room8">
<a href="../image/room8-6.gif" data-lightbox="roadtrip-room8" data-title="플로렌스">
<img src="../image/room8-6.gif" />
</a>
</div>
</div>
</div>
</div>
<!-- 미셔너리 dvd end -->
<!---- 포트폴리오 END -->
<!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="../../부트스트랩 테스트/lightbox2-master/lightbox2-master/dist/js/lightbox.js"></script>
<script src="../whoo_spyscroll.js"></script>
<!-- 포트폴리오 스크립트 스작 -->
<script>
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
$(document).ready(function(){
$(".filter-button").click(function(){
var value = $(this).attr('data-filter');
if(value == "all")
{
//$('.filter').removeClass('hidden');
$('.filter').show('1000');
}
else
{
// $('.filter[filter-item="'+value+'"]').removeClass('hidden');
// $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
$(".filter").not('.'+value).hide('3000');
$('.filter').filter('.'+value).show('3000');
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
</script>
<!-- 포트폴리오 스크립트 끝 -->
<!-- 미소너리 스크립트(이거를 빼면 미소너리가 제대로됨) 시작-->
<script>
// external js: masonry.pkgd.js, imagesloaded.pkgd.js
// init Masonry
var $grid = $('.grid').masonry({
itemSelector: '.grid',
percentPosition: true,
columnWidth: '.grid-sizer'
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry();
});
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: 160,
gutter: 20
});
</script>
<!--미소너리 스크립트(이거를 빼면 미소너리가 제대로됨) 끝 -->
<script>
lightbox.option({
'resizeDuration': 200,
'wrapAround': true,
'fadeDuration':100,
'wrapAround':true
})
</script>
</body>
</html>
