필터기능이 있는 masonty 질문좀 드릴게요....

필터기능이 있는 masonty 질문좀 드릴게요....

QA

필터기능이 있는 masonty 질문좀 드릴게요....

본문

masonry 연습하면서 라이트박스와 필터가 있는 기능을 조합해서 연습을 하고 있는데요...

문제는 그냥 masonry + 라이트박스를 이용하면 잘되는데...여기에 필터기능을 넣어서 하면

masonry가 매끄럽게 연결이 안되고 꼭 이빨 빠진것처럼 되는데...어떻게 해야 하는지요...ㅠㅠ;

아래사진처럼....첫번째가 필터가 있는 것인데...masonry가 꼭 이빨 빠진것 처럼 보기가 않좋아요.

두번째 이미지처럼...매끄럽게 이어지게 하려면 어떻게 해야하는지요...

 

1. masonry + lightbox + filter기능이 조합된것인데 샘플로 몇개사진만 사이즈를 틀리게 했는데 이빨 빠진듯 보기 않좋게 나옵니다.

79ba17ad14edc86facb56f32ef863247_1497529441_1633.png

 

2. masonry + lightbox 이거는 매끄럽게 나오는데 1번도 2번처럼 나오게 할수없는지요
79ba17ad14edc86facb56f32ef863247_1497529441_6501.png 

<!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> 

이 질문에 댓글 쓰기 :

답변 1

답변을 작성하시기 전에 로그인 해주세요.
전체 205
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT