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

페이지 정보

shadow2fox shadow2fox 2,333 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,375
레벨 147
경험치 3,241,272

Progress Bar 49.83%

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

댓글

첫 번째 댓글을 남겨 주세요

Total 762926 페이지

제목 글쓴이 날짜 조회 추천
그누•영카트  🏆 영카트 5.3.2.0 패치 shadow2fox 2018.11.22 2,194 0
그누•영카트  🏆 영카트 5.4.5.2 shadow2fox 2021.03.17 1,380 0
DB  🏆 MYSQL root 비번 분실시 해결방법 야돌이 2006.05.28 3,388 0
그누•영카트  댓글+1🏆 🎞️ 접근차단 IP, 접근가능 IP로 인해 홈에 접근 불가될때 루루아빠 2015.11.21 3,084 0
이윰  🏆 마우스 오버시 이전글 다음글에 제목을 띄우기 shadow2fox 2018.11.27 2,348 0
DB  🏆 MYSQL에서 DB 백업 및 복구 방법 야돌이 2006.05.28 3,221 0
이윰  댓글+2🏆 회원 프로필 사진 변경시 바로 갱신하여 보여 주기 shadow2fox 2018.12.04 2,854 0
제로  🏆 선택한 게시글은 목록 제목에서 진하게 표시하기 루루아빠 2006.05.29 3,663 0
그누•영카트  🏆 🎞️ 그누보드 5.1.8 패치 루루아빠 2015.11.25 2,780 0
제로  댓글+3🏆 한글 이름이 들어간 이미지나 동영상 익스 설정없이 보여주기 루루아빠 2006.06.01 3,371 0
그누•영카트  🏆 🎞️ 영카트 5.1.7 패치 루루아빠 2015.11.25 2,619 0
그누•영카트  🏆 영카트 5.4.5.3 shadow2fox 2021.04.05 1,355 0
기타  🏆 🎞️ 윈도우 서버를 위한 하드 링크와 심볼릭 링크 루루아빠 2015.11.29 2,621 0
그누•영카트  🏆 🎞️ 그누보드 5.1.9 패치 루루아빠 2015.12.07 4,696 0
jQuery  🏆 클릭 함수가 더블 클릭시에만 작동된다면 shadow2fox 2018.12.11 1,987 0
제로  🏆 아파치1.x 버젼을 위한 설정 루루아빠 2006.06.01 3,514 0
그누•영카트  🏆 🎞️ 영카트 5.1.8 패치 루루아빠 2015.12.07 2,876 0
그누•영카트  🏆 영카트 5.4.5.4 shadow2fox 2021.05.04 1,666 0
제로  🏆 코멘트 한번만 작성하게 하기 루루아빠 2006.07.01 3,813 0
이윰  🏆 🎞️ Eyoom Builder 1.1.17 패치 (Start of the Season2) 루루아빠 2015.12.08 3,268 0
제로  🏆 포인트 점수에 따른 자동 레벨업 루루아빠 2006.07.10 4,814 0
이윰  댓글+1🏆 이미지 리사이징 기능 끄기 (큰 이미지가 커졌다가 작아지는 문제 해결) 루루아빠 2015.12.18 4,328 0
제로  🏆 💾 게시판 타이틀메뉴 자동생성+카테고리 --> 이미지로 루루아빠 2006.08.01 3,426 0
이윰  🏆 Eyoom Builder 1.2.0 패치 루루아빠 2015.12.21 3,170 0
그누•영카트  🏆 그누보드 5.3.2.1 패치 shadow2fox 2018.12.11 2,256 0
제로  🏆 자신이 쓴 글을 수정할 때 조회수 올라가지 않게 루루아빠 2006.09.25 3,307 0
그누•영카트  🏆 그누보드 5.1.10 패치 루루아빠 2015.12.23 2,834 0
그누•영카트  🏆 영카트 5.3.2.1 패치 shadow2fox 2018.12.11 2,377 0
기타  🔒 iplug 공동구매 카페주소 루루아빠 2007.03.01 8 0
그누•영카트  🏆 영카트 5.1.9 패치 루루아빠 2015.12.23 3,355 0