테스트 사이트 - 개발 중인 베타 버전입니다

이건 어떤 plugin인가요? 채택완료

jacobblack 6년 전 조회 4,130

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

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

댓글을 작성하려면 로그인이 필요합니다.

답변 6개

채택된 답변
+20 포인트
6년 전

제이쿼리 플러그인 맞습니다. 

https://www.final-tiles-gallery.com/gallery-with-filters

이런걸 사용 한듯 하고 이것 말고도 여러가지 있습니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

댓글을 작성하려면 로그인이 필요합니다.

</p>

<p><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></p>

<p><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></p>

<p><script></p>

<p>$(function(){

    $('.list_0 > li').on('click', function(e){

        var targetA = e.target.id;</p>

<p>        if ( !$(this).hasClass('on') ) {

            $('.list_1 > li').each(function(){

                if ( $(this).hasClass(targetA) ) {

                    $(this).stop().fadeIn(300);

                } else {

                    $(this).stop().fadeOut(300);

                }

            });

        }

    });

});</p>

<p></script></p>

<p>

 

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

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

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

 

</p>

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

});</p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

j
jacobblack
6년 전
감사합니다. 이건 전체 리스트를 불러와서 선택한 값에 따라 해당 카테고리 리스트는 감추었다 보였다 하는건가보네요. 그누보드 분류를 사용해서 만든 게시판에는 수정해서 적용해보니 이미 분류별, 등록순별로 db에서 불러오니 큰 움직임이 없네요. 적용하려면 db부터 건드려야겠군요 ^^
j
jacobblack
6년 전
감사합니다. 이건 전체 리스트를 불러와서 선택한 값에 따라 해당 카테고리 리스트는 감추었다 보였다 하는건가보네요. 그누보드 분류를 사용해서 만든 게시판에는 수정해서 적용해보니 이미 분류별, 등록순별로 db에서 불러오니 큰 움직임이 없네요. 적용하려면 db부터 건드려야겠군요 ^^

댓글을 작성하려면 로그인이 필요합니다.

j
6년 전

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

핫워드
6년 전
글세요..플러그인은 사용해 보질 않아서 잘 모르겠습니다.

댓글을 작성하려면 로그인이 필요합니다.

6년 전

플러그인이 아니라 워드프레스를 이용했네요.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인