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

페이지 정보

shadow2fox shadow2fox 2,260 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,607,140
레벨 147
경험치 3,224,849

Progress Bar 12.59%

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

댓글

첫 번째 댓글을 남겨 주세요

Total 7591438 페이지
제목 글쓴이 날짜 조회 추천
그누•영카트  🏆 그누보드 5.3.1.6 패치 shadow2fox 2018.08.25 2,258 0
이윰  🏆 🚩 jQuery-1.8.3를 jQuery-1.9.x 이상으로 업그레이드시 masonry 오류 해결하기 shadow2fox 2018.08.22 2,261 0
JavaScript  🏆 사용자의 브라우저를 검출하는 방법 shadow2fox 2018.08.22 2,107 0
이윰  🏆 Eyoom Builder 3.0.4 패치 shadow2fox 2018.08.20 2,932 0
이윰  🏆 Eyoom Builder 3.0.3 - 패치에 문제가 있는 버전입니다. shadow2fox 2018.08.20 2,549 0
이윰  🏆 공지글에는 댓글 기능 끄기 shadow2fox 2018.08.19 2,217 0
그누•영카트  댓글+1🏆 [PHP 7.2.x] count(): Parameter must be an array or an object that implements Countable 에러 해결하기 shadow2fox 2018.08.19 6,883 0
CSS  🏆 특정 아이디나 클래스 이후에 특정 아이디나 클래스가 있을 때 shadow2fox 2018.08.15 2,230 0
jQuery  🏆 모바일 및 태블릿에서 스크롤이 아닌 경우에만 터치 제어하기 shadow2fox 2018.08.13 2,252 0
그누•영카트  🏆 게시글 제목이나 본문에 적용되는 단어 필터링 관리자는 제외하기 shadow2fox 2018.07.30 2,093 0
이윰  🏆 유튜브 재생목록(플레이리스트)이 적용되지 않는다면 shadow2fox 2018.07.29 2,294 0
이윰  🏆 최신 브라우저에서 푸시 사운드 문제 해결하기 shadow2fox 2018.07.20 2,157 0
이윰  🏆 이윰빌더 최신글 본문 추출시 엔터, 띄어쓰기 태그를 스페이스(한 칸 띄우기)로 바꾸기 shadow2fox 2018.07.12 2,128 0
jQuery  🏆 마우스 클릭 및 엔터를 일정 초 이상 유지하면 특정 url로 이동하기 shadow2fox 2018.07.11 2,207 0
이윰  댓글+2🏆 작성글 날림 방지하기 shadow2fox 2018.07.04 2,337 0
그누•영카트  🏆 영카트 5.3.1.5 패치 shadow2fox 2018.07.04 2,413 0
그누•영카트  🏆 그누보드 5.3.1.5 패치 shadow2fox 2018.07.04 2,133 0
이윰  🏆 PHP 7.x에서 이윰빌더 알람 푸시(push) 관련 PHP Notice: Undefined index: alarm 해결하기 shadow2fox 2018.07.01 2,393 0
이윰  🏆 내글반응 내용 추출 쌍 따옴표가 &#034;로 표시되는 문제 해결하기 shadow2fox 2018.06.18 2,334 0
그누•영카트  🏆 게시판 관리자는 글쓰기, HTML, DHTML 제한 적용받지 않기 shadow2fox 2018.06.09 2,192 0