이건 어떤 plugin인가요?
본문
http://umamu.jp/
카테고리 클릭 시 이미지의 이동 효과인데
이건 어떤 플러그인을 사용한건가요?
답변 6
제이쿼리 플러그인 맞습니다.
https://www.final-tiles-gallery.com/gallery-with-filters
이런걸 사용 한듯 하고 이것 말고도 여러가지 있습니다.
정렬은 플러그인 썻고 사라지고 나타나는건 직접 구현했네요.
$("#all-nav .cate a").click(function(){
if(!$(this).hasClass("current")){
var c = $(this).attr("class");
var $this = $(this);
$("#image-list li").each(function(){
if( $this.hasClass("all") ){
$(this).addClass("sort");
$(this).find("a").stop().fadeIn(300);
}else if($(this).hasClass( c )){
$(this).addClass("sort");
$(this).find("a").stop().fadeIn(300);
}else{
$(this).removeClass("sort");
$(this).find("a").stop().fadeOut(300);
}
});
$('#image-list ul').freetile("layout", {
animate : true, selector : "#image-list li.sort"
});
$("#all-nav .cate .current").removeClass("current").stop().fadeTo(200, 0.3);
$(this).addClass("current");
}
return false;
if($(this).hasClass("current")){
return false;}
});
감사합니다. 이건 전체 리스트를 불러와서 선택한 값에 따라 해당 카테고리 리스트는 감추었다 보였다 하는건가보네요. 그누보드 분류를 사용해서 만든 게시판에는 수정해서 적용해보니 이미 분류별, 등록순별로 db에서 불러오니 큰 움직임이 없네요. 적용하려면 db부터 건드려야겠군요 ^^
감사합니다. 이건 전체 리스트를 불러와서 선택한 값에 따라 해당 카테고리 리스트는 감추었다 보였다 하는건가보네요. 그누보드 분류를 사용해서 만든 게시판에는 수정해서 적용해보니 이미 분류별, 등록순별로 db에서 불러오니 큰 움직임이 없네요. 적용하려면 db부터 건드려야겠군요 ^^
<style>
.float_clear:after {content: ""; display: block; clear: both; visibility: hidden;}
ul.list_0 > li {float: left; width: 23%; height: 50x; border: 2px solid black; margin: 5px; font-size: 30px; text-align: center; line-height: 50px;}
ul.list_1 > li {float: left; width: 300px; height: 300px; border: 2px solid black; margin: 5px; font-size: 30px; text-align: center; line-height: 300px;}
</style>
<ul class="list_0 float_clear">
<li id="A">A</li>
<li id="B">B</li>
<li id="C">C</li>
<li id="D">D</li>
</ul>
<ul class="list_1 float_clear">
<li class="A">1</li>
<li class="A">2</li>
<li class="D">3</li>
<li class="D">4</li>
<li class="B">5</li>
<li class="B">6</li>
<li class="C">7</li>
<li class="C">8</li>
<li class="C">9</li>
<li class="D">0</li>
<li class="C">1</li>
<li class="C">2</li>
<li class="C">3</li>
<li class="D">4</li>
<li class="A">5</li>
</ul>
<script>
$(function(){
$('.list_0 > li').on('click', function(e){
var targetA = e.target.id;
if ( !$(this).hasClass('on') ) {
$('.list_1 > li').each(function(){
if ( $(this).hasClass(targetA) ) {
$(this).stop().fadeIn(300);
} else {
$(this).stop().fadeOut(300);
}
});
}
});
});
</script>
대충 비슷하게 만들어봤는데 작동은 하네요.
플러그인이 아니라 워드프레스를 이용했네요.
아 워드프레스군요. 혹시 비슷하게 카테고리 클릭시 정렬되는 플러그인은 없나요?
글세요..플러그인은 사용해 보질 않아서 잘 모르겠습니다.
답변을 작성하시기 전에 로그인 해주세요.
