[이윰] jQuery-1.8.3를 jQuery-1.9.x 이상으로 업그레이드시 masonry 오류 해결하기

페이지 정보

shadow2fox shadow2fox 2,344 2018.08.22 19:45:06

평점

  • 평점 : 0점 (0명 참여)

본문

jQuery-1.8.3를 jQuery-1.9.x 이상으로 업그레이드시 masonry 오류 해결하기
그누보드에 기본 탑재되어 사용되는 jQuery-1.8.3를 jQuery-1.9.x 이상으로 업그레이드할 경우 모달창과 무한스크롤과 연계된 masonry 소스로 인해 다음과 같은 오류가 나타난다.
cannot call methods on masonry prior to initialization; attempted to call method 'appended'

이윰빌더에서 제공하는 스킨 중 갤러리(시즌3) or 블로그(시즌2) 스킨 list.skin.html를 열어 다음과 같이 수정한다.

수정 전

    function( newElements ) {
        var $newElems = $( newElements ).css({ opacity: 0 });
        $newElems.imagesLoaded(function(){
            $newElems.animate({ opacity: 1 });
            $container.masonry( 'appended', $newElems, true );
        });
        var gutter = 17;
        var min_width = 170;
        $container.imagesLoaded( function(){
            $container.masonry({
                itemSelector : '.gallery-item',
                gutterWidth: gutter,
                isAnimated: true,
                columnWidth: function( containerWidth ) {
                    var windowSize = $(window).width();
                    if (windowSize > 1199) {
                        var box_width = (((containerWidth - 2*gutter)/3) | 0) ;
                        if (box_width < min_width) {
                            box_width = (((containerWidth - gutter)/3) | 0);
                        }
                    } else if (windowSize <= 1199 && windowSize > 766) {
                        var box_width = (((containerWidth - 1*gutter)/2) | 0) ;
                        if (box_width < min_width) {
                            box_width = (((containerWidth - gutter)/2) | 0);
                        }
                    } else if (windowSize <= 766 && windowSize > 566) {
                        var box_width = (((containerWidth - 1*gutter)/2) | 0) ;
                        if (box_width < min_width) {
                            box_width = (((containerWidth - gutter)/2) | 0);
                        }
                    } else {
                        var box_width = (((containerWidth - 0*gutter)/1) | 0) ;
                        if (box_width < min_width) {
                            box_width = (((containerWidth - gutter)/1) | 0);
                        }
                    }

                    if (box_width < min_width) {
                        box_width = containerWidth;
                    }

                    $('.gallery-item').width(box_width);

                    setTimeout(function() {
                        $('.gallery-item').show();
                    }, 0);

                    return box_width;
                }
            });
        });
    });
수정 후

    function( newElements ) {
        var gutter = 17;
        var min_width = 170;
        $container.imagesLoaded( function(){
            $container.masonry({
                itemSelector : '.gallery-item',
                gutterWidth: gutter,
                isAnimated: true,
                columnWidth: function( containerWidth ) {
                    var windowSize = $(window).width();
                    if (windowSize > 1199) {
                        var box_width = (((containerWidth - 2*gutter)/3) | 0) ;
                        if (box_width < min_width) {
                            box_width = (((containerWidth - gutter)/3) | 0);
                        }
                    } else if (windowSize <= 1199 && windowSize > 766) {
                        var box_width = (((containerWidth - 1*gutter)/2) | 0) ;
                        if (box_width < min_width) {
                            box_width = (((containerWidth - gutter)/2) | 0);
                        }
                    } else if (windowSize <= 766 && windowSize > 566) {
                        var box_width = (((containerWidth - 1*gutter)/2) | 0) ;
                        if (box_width < min_width) {
                            box_width = (((containerWidth - gutter)/2) | 0);
                        }
                    } else {
                        var box_width = (((containerWidth - 0*gutter)/1) | 0) ;
                        if (box_width < min_width) {
                            box_width = (((containerWidth - gutter)/1) | 0);
                        }
                    }

                    if (box_width < min_width) {
                        box_width = containerWidth;
                    }

                    $('.gallery-item').width(box_width);

                    setTimeout(function() {
                        $('.gallery-item').show();
                    }, 0);

                    return box_width;
                }
            });
        });
        var $newElems = $( newElements ).css({ opacity: 0 });
        $newElems.imagesLoaded(function(){
            $newElems.animate({ opacity: 1 });
            $container.masonry( 'appended', $newElems, true );
        });
    });
소스를 보면 알겠지만 masonry가 무한스크롤보다 먼저 초기화되야 언급된 오류가 일어나지 않는다.
추천인
  • 추천해 주세요
shadow2fox
10
shadow2fox - 회원등급 : 자연/Level 147 - 포인트 : 2,614,788
레벨 147
경험치 3,242,477

Progress Bar 52.56%

- 가입일 : 2015-03-10 12:21:44
- 서명 : 인간에게 가장 큰 선물은 자기 자신에게 기회를 주는 것이다. - 크리스 가드너, Chris Gardner -
- 자기소개 : There's never a shortcut to happiness.

댓글

첫 번째 댓글을 남겨 주세요

Total 762926 페이지

제목 글쓴이 날짜 조회 추천
그누•영카트  🏆 영카트 5.4.4 shadow2fox 2021.01.05 6,355 0
제로  🏆 💾 [스킨만들기] write.php(글쓰기 폼) 설명입니다 루루아빠 2005.06.23 5,607 0
이윰  🏆 이윰빌더 출석부 최신글 스킨 오늘의 랭킹으로만 나타내기 루루아빠 2018.02.03 2,605 0
제로  🏆 💾 [스킨만들기] view.php(목록보기) 파일 설명입니다 루루아빠 2005.06.23 3,315 0
이윰  🏆 포인트를 걸고 자료 배포시 포인트 수수료율(%) 변경하기 루루아빠 2015.08.23 3,464 0
제로  🏆 💾 [스킨만들기] view_comment.php(댓글 출력 부분) 의 설명입니다 루루아빠 2005.06.23 3,397 0
그누•영카트  🏆 인기검색어 갯수와 일자 수정하기 루루아빠 2015.08.24 2,639 0
이윰  🏆 Eyoom Builder 1.3.16 패치 루루아빠 2018.03.12 2,562 0
제로  🏆 💾 [스킨만들기] view_write_comment.php(댓글 쓰기 부분)의 설명입니다 루루아빠 2005.06.23 3,024 0
그누•영카트  🏆 그누보드 5.1.1 패치 루루아빠 2015.08.28 2,686 0
그누•영카트  🏆 그누보드 5.2.9.8.3 패치 루루아빠 2018.03.22 2,686 0
그누•영카트  🏆 영카트 5.4.4.1 shadow2fox 2021.01.05 1,323 0
제로  🏆 💾 [스킨만들기] view_foot.php(이전 다음글, 버튼 표시 부분)의 설명입니다 루루아빠 2005.06.23 2,741 0
그누•영카트  🏆 영카트 5.0.44 패치 루루아빠 2015.08.28 2,993 0
그누•영카트  🏆 영카트 5.2.9.8.2 패치 루루아빠 2018.03.22 2,792 0
제로  🏆 💾 [스킨만들기] view_list_head.php(리스트의 상단 부분 출력)의 설명입니다 루루아빠 2005.06.23 2,865 0
그누•영카트  🏆 영카트 이미지 가운데 정렬과 이미지 간격 수정 루루아빠 2015.08.28 2,948 0
그누•영카트  🏆 영카트 5.2.9.8.3 패치 루루아빠 2018.03.22 2,774 0
제로  🏆 💾 [스킨만들기] view_list_main.php(목록 출력 부분)의 설명입니다 루루아빠 2005.06.23 2,963 0
이윰  댓글+2🏆 사운드클라우드 embed options 제어하기 루루아빠 2015.09.07 3,916 0
그누•영카트  🏆 그누보드 5.2.9.8.4 패치 루루아빠 2018.03.30 2,528 0
제로  🏆 💾 [스킨만들기] view_list_foot.php(목록 출력 마무리 부분)의 설명입니다 루루아빠 2005.06.23 3,065 0
그누•영카트  🏆 영카트 5.2.9.8.4 패치 루루아빠 2018.03.30 2,689 0
그누•영카트  🏆 영카트 5.4.4.2 shadow2fox 2021.01.05 1,087 0
제로  🏆 제로보드에 나오는 변수들의 뜻 정리 루루아빠 2005.06.23 2,925 0
그누•영카트  🏆 📸 5.2.9.8.4 버전에서 5.3.1 정식버전으로 패치 루루아빠 2018.04.06 2,530 0
제로  🏆 읽고 있는글의 링크를 해제하여 해당글을 다시 클릭할 수 없게 하기 루루아빠 2005.06.24 3,375 0
기타  댓글+1🏆 Jwplayer 반응형으로 검정화면 없이 꽉차게 만들기 루루아빠 2015.09.08 4,305 0
그누•영카트  🏆 📸 5.2.9.8.4 버전에서 5.3.1 정식버전으로 패치 루루아빠 2018.04.06 2,792 0
제로  🏆 글, 링크 이미지, 업로드 이미지 모두 가운데 정렬하기 루루아빠 2005.06.24 2,980 0