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

페이지 정보

shadow2fox shadow2fox 2,507 2018.08.22 19:45:06

본문

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 148 - 포인트 : 2,632,007
레벨 148
경험치 3,291,553

Progress Bar 63.41%

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

댓글

첫 번째 댓글을 남겨 주세요

Total 7691026 페이지

제목 글쓴이 날짜 조회 추천
그누•영카트  🏆 그누보드 5.3.3.2 shadow2fox 2019.08.13 2.6k 0
이윰  댓글+1🏆 PHP 8.x Fatal error : 중괄호 사용으로 인한 json.class.php 오류 shadow2fox 2021.02.17 2.6k 1
이윰  🏆 Eyoom Builder 1.3.3 패치 루루아빠 2017.11.21 2.6k 0
Bootstrap  🏆 모달창 내부에서 모달창 부모 닫기 루루아빠 2018.06.02 2.6k 0
그누•영카트  🏆 영카트 5.3.1.5 패치 shadow2fox 2018.07.04 2.6k 0
Bootstrap  🏆 부트스트랩 툴팁 보이기, 감추기 지연 시간 설정하기 루루아빠 2018.01.10 2.6k 0
그누•영카트  🏆 그누보드 5.2.3 패치 루루아빠 2016.10.19 2.6k 0
그누•영카트  🏆 그누보드 5.2.9.8.4 패치 루루아빠 2018.03.30 2.6k 0
그누•영카트  🏆 영카트 5.3.2.5 shadow2fox 2019.01.29 2.6k 0
이윰  댓글+1🏆 이윰빌더 현재 접속자 최신글에서 관리자도 ip가 숨겨지는 문제 해결하기 shadow2fox 2020.04.10 2.6k 1
그누•영카트  🏆 댓글에 달린 비밀 댓글을 원댓글 작성자에게도 보여주기 루루아빠 2016.01.30 2.6k 0
제로  🏆 💾 원하는 곳에 카테고리 뿌려주기(메뉴로 활용 가능) 루루아빠 2005.07.08 2.7k 0
제로  🏆 로그아웃시 현재접속자 리스트에서 바로 안나오게 하기 루루아빠 2005.07.14 2.7k 0
이윰  🏆 Eyoom Builder 3.0.7 패치 shadow2fox 2018.10.15 2.7k 0
Bootstrap  🏆 부트스트랩 툴팁 텍스트 한 줄로 보여주기 루루아빠 2017.08.03 2.7k 1
이윰  댓글+1🏆 현재 게시글 스크랩 갯수 본문에 보여주기 shadow2fox 2019.04.28 2.7k 2
에디터  댓글+1🏆 SmartEditor2 포토 업로더 모바일에서 사진 순서 정렬하기 shadow2fox 2020.04.05 2.7k 1
제로  🏆 [re] 조금더 전문적인 사용법 루루아빠 2005.06.27 2.7k 0
제로  댓글+1🏆 수정된 정보를 제대로 보여주기 루루아빠 2005.07.03 2.7k 0
제로  댓글+1🏆 음악스킨 안될때 처방법.. 루루아빠 2005.07.09 2.7k 0
그누•영카트  🏆 📸 5.2.9.8.4 버전에서 5.3.1 정식버전으로 패치 루루아빠 2018.04.06 2.7k 0
그누•영카트  🏆 그누보드 5.2.9.2 패치 루루아빠 2017.08.31 2.7k 0
이윰  🏆 Eyoom Builder 1.3.16 패치 루루아빠 2018.03.12 2.7k 0
그누•영카트  🏆 게시판을 디바이스에 따라 보여주기 안보여주기 루루아빠 2015.11.04 2.7k 0
이윰  🏆 전체검색 리스트 페이지에서 외부 이미지도 썸네일 사용하기 루루아빠 2018.05.06 2.7k 0
Bootstrap  🏆 모달창 오픈시 백그라운드(메인 화면) 스크롤 금지 최종 버전 루루아빠 2018.05.16 2.7k 0
제로  🏆 공지사항 체크를 빼면 제위치로 가지 않는 문제의 해결점 루루아빠 2005.07.07 2.7k 0
이윰  🏆 PHP 7.x에서 이윰빌더 알람 푸시(push) 관련 PHP Notice: Undefined index error 해결하기 shadow2fox 2019.01.01 2.7k 0
이윰  🏆 게시글 본문에 태그가 포함된 경우 검색시 그대로 노출되는 문제 해결 루루아빠 2016.05.13 2.7k 0
이윰  댓글+5🏆 네이버TV 올바르게 적용하기 shadow2fox 2019.10.12 2.7k 2