이건 어떤 plugin인가요?

이건 어떤 plugin인가요?

QA

이건 어떤 plugin인가요?

본문

http://umamu.jp/
카테고리 클릭 시 이미지의 이동 효과인데 

이건 어떤 플러그인을 사용한건가요?

이 질문에 댓글 쓰기 :

답변 6

정렬은 플러그인 썻고 사라지고 나타나는건 직접 구현했네요.

 


$("#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>

 

대충 비슷하게 만들어봤는데 작동은 하네요.

아 워드프레스군요. 혹시 비슷하게 카테고리 클릭시 정렬되는 플러그인은 없나요?

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

회원로그인

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