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

페이지 정보

shadow2fox shadow2fox 2,343 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,688
레벨 147
경험치 3,242,377

Progress Bar 52.33%

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

댓글

첫 번째 댓글을 남겨 주세요

Total 762926 페이지

제목 글쓴이 날짜 조회 추천
이윰  🏆 쪽지 보내기 textarea(쪽지내용) 높이 키우기 루루아빠 2015.09.24 3,148 0
그누•영카트  댓글+1🏆 비밀글 특정 레벨이상 보여주기 루루아빠 2015.08.17 3,147 0
CSS  🏆 webkit-transform 스타일이 마우스 오버시 보이는 flickering 증상 해결하기 루루아빠 2016.05.26 3,145 0
이윰  🏆 게시판 목록에서 제목 바탕 부분을 클릭해도 본문으로 이동하기 루루아빠 2015.09.20 3,142 0
그누•영카트  🏆 모바일에서 로고 이미지 올바르게 위치시키기 루루아빠 2015.10.11 3,138 0
HTML5  🏆 Google Drive로 공유된 동영상 Jwplayer를 통해 플레이하기 루루아빠 2015.09.15 3,136 0
이윰  🏆 "카테고리"별 게시글 갯수 나타내기 루루아빠 2015.04.24 3,135 1
그누•영카트  🏆 영카트 5.2.9.5 패치 루루아빠 2017.10.22 3,133 0
이윰  🏆 인기검색어 관련 설정 바꾸기 루루아빠 2015.09.12 3,128 0
이윰  🏆 익명 게시판에 글 작성시 기본으로 익명 체크되게 하기 루루아빠 2015.03.28 3,128 0
이윰  🏆 이윰빌더 태그 입력시 작은 따옴표(apostrophe)가 포함되면 삭제 안되는 문제 루루아빠 2016.02.26 3,127 0
이윰  🏆 📸 Eyoom Builder 1.3.0 시즌3 루루아빠 2017.11.21 3,124 0
그누•영카트  🏆 그누보드 5.1.3 (PHP7 대응 MySQLi 지원 추가) 패치 루루아빠 2015.10.17 3,124 0
이윰  🏆 최신글 추출 시 공지글을 제외하기 루루아빠 2017.08.19 3,121 0
이윰  🏆 Eyoom Builder 1.1.10 패치 루루아빠 2015.10.06 3,121 0
그누•영카트  🏆 그누보드5.0.34 + 영카트5.0.34 보안 패치 루루아빠 2015.05.22 3,116 0
제로  댓글+1🏆 GD게시판의 썸네일을 이용해 겔러리 최근파일 빠르게 보여주기 루루아빠 2005.06.12 3,115 0
이윰  🏆 Eyoom Builder 1.3.12 패치 루루아빠 2017.11.21 3,110 0
이윰  🏆 댓글에 이미지가 추가된 댓글을 수정할 경우 이미지가 삭제되는 버그 패치 루루아빠 2015.08.07 3,108 0
이윰  🏆 이모티콘을 이윰빌더에 적용하기 위한 규칙 루루아빠 2015.07.23 3,108 0
그누•영카트  🏆 영카트 5.2.9.4 패치 루루아빠 2017.09.25 3,105 0
이윰  🏆 1.1.0 패치 후 카테고리 사용하면 분류 선택시 미등록페이지로 나오는 문제 루루아빠 2015.05.21 3,103 0
이윰  🏆 게시글 본문 보기에서 제목 클릭시 글 수정하기 루루아빠 2015.06.04 3,097 0
제로  🏆 💾 [스킨만들기] list_notice.php(공지사항 출력)의 설명 루루아빠 2005.06.23 3,096 0
이윰  댓글+3🏆 PHP 8.x 지원을 위한 암호화, 복호화 함수 shadow2fox 2021.02.16 3,092 3
그누•영카트  댓글+1🏆 🎞️ 접근차단 IP, 접근가능 IP로 인해 홈에 접근 불가될때 루루아빠 2015.11.21 3,092 0
이윰  🏆 해당 페이지에 적용된 템플릿언더바 전체 변수 확인하기 루루아빠 2017.02.24 3,088 0
이윰  🏆 태그 더보기시 페이지당 태그 노출 갯수 조정하기 루루아빠 2016.08.25 3,088 0
그누•영카트  🏆 회원 닉네임 길이 제한두기 루루아빠 2015.03.28 3,085 0
이윰  댓글+1🏆 카카오TV 플레이어 최신 버전 재생 오류 해결하기 shadow2fox 2019.03.11 3,081 1