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

페이지 정보

shadow2fox 2,025 2018.08.22 19:45

평점

  • 평점 : 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가 무한스크롤보다 먼저 초기화되야 언급된 오류가 일어나지 않는다.
추천인
  • 추천해 주세요
10
shadow2fox - 회원등급 : 자연/Level 143 - 포인트 : 2,551,914
레벨 143
경험치 3,057,009

Progress Bar 26%

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

댓글

첫 번째 댓글을 남겨 주세요

Total 242313 페이지
제목 글쓴이 날짜 조회 추천
이윰  🏆 쪽지 페이징 기능 넣기 루루아빠 2015.06.04 2,957 0
이윰  댓글+1🏆 1.1.2 패치후 카테고리 분류 게시판 분류 선택시 미등록페이지로 나오는 문제점 루루아빠 2015.06.04 3,122 0
이윰  🏆 게시글 본문 보기에서 제목 클릭시 글 수정하기 루루아빠 2015.06.04 2,930 0
이윰  🏆 Eyoom Builder 1.1.3 패치 루루아빠 2015.06.05 3,537 0
이윰  🏆 이윰빌더 1.1.4 패치 루루아빠 2015.06.08 3,331 0
이윰  댓글+1🏆 게시판 리스트에 무한스크롤 기능 패치 루루아빠 2015.06.08 4,519 0
이윰  🏆 짧은 글 주소에 댓글에 표시되지 않는 버그 패치 루루아빠 2015.06.08 3,436 0
이윰  🏆 이윰 레벨업 관련 push(푸시) 메세지 오류 루루아빠 2015.06.15 2,889 0
이윰  🏆 갤러리 게시판 혹은 웹진형 게시판 목록에서 본문 내용 글자수 루루아빠 2015.06.15 3,115 0
이윰  🏆 특정 게시판 첨부 이미지와 본문 가운데 정렬 루루아빠 2015.06.16 3,038 0
이윰  🏆 모바일에서는 링크 이동시 로딩중 이미지 띄우기 루루아빠 2015.06.17 3,164 1
이윰  🏆 사이드 레이아웃의 프로필 사진 옆에 쪽지 badge 만들기 루루아빠 2015.06.18 3,200 0
이윰  🏆 아웃로그인 레이아웃 변경하기 루루아빠 2015.06.19 3,223 1
이윰  🏆 갤러리 목록에서 현재 보고있는 게시물에 "열랄중" 표시하기 루루아빠 2015.06.20 3,145 0
이윰  🏆 이윰빌더 1.1.5 패치 루루아빠 2015.06.22 3,459 0
이윰  🏆 이윰빌더 1.1.6 패치 루루아빠 2015.06.23 3,414 0
이윰  🏆 이윰빌더와 그누보드 패치시 수정할 파일들 루루아빠 2015.06.23 6,148 0
이윰  댓글+1🏆 masonry 사용하는 스킨 가로 갯수(box 수) 늘리기 루루아빠 2015.06.24 3,823 0
이윰  🏆 샵커뮤니티 테마 스위쳐 패치 루루아빠 2015.06.25 2,871 0
이윰  🏆 스크린 사이즈에 따른 미디어 쿼리(container 크기 변화) 루루아빠 2015.06.25 3,278 0