질문/조언질답게시판

개발이 중단된 xe의 팝업모듈과 애드온을 사용하여 2개이상의 팝업을 띄우는 용도로 사용하고있습니다.
그리고 이미지 슬라이딩배너위젯인 eh_whcarousel 위젯이 설치되어있는 메인페이지에서만 유독 팝업이 뜨질 않습니다.

 

여기저기 아무리 검색을 해 봐도 팝업모듈과 위젯간 jquery 충돌일 수 있으니 1.7이상의 jquery 버전으로 통일시켜보라고만 나오고 어떻게 통일을 시켜야는지에 대한 방법은 안보이는군요. 
eh_whcarousel 위젯은 list.html 파일에 아래와같이 jquery를 사용하고있는데 팝업모듈에서는 도무지 찾지를 못하겠습니다.
<script type="text/javascript" src="/common/js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.waterwheelCarousel.js"></script>

 

충돌이 있다면 팝업모듈과 위젯간 공통으로 사용하고있는 변수?를 바꾸어 주면 될거같은데 혹시 어떻게 버전을 맞추어야 하는지요

?

다른 팝업애드온이나 모듈들은 팝업을 한개씩밖에 띄우질 못해 애를 먹고 있습니다.

 

사용중인 팝업모듈 : https://xe1.xpressengine.com/index.php?mid=download&package_id=18640942
사용중인 팝업오프너 : https://xe1.xpressengine.com/index.php?mid=download&package_id=18640943
사용중인 이미지슬라이딩 위젯 : https://xe1.xpressengine.com/index.php?mid=download&package_id=22263678

 

도움 기다립니다.

TAG •
  • profile
    개발자도구 콘솔로그 확인해보세요. 크롬 F12
  • profile
    하, 이렇게나 빨리 답을 주셔서 무어라 감사말씀을ㅜ
    콘솔을 보니 이렇게 나옵니다. 막막하네요

    (index):1536 Uncaught TypeError: jQuery(...).css(...).xe_popup is not a function
    at HTMLDocument.<anonymous> ((index):1536)
    at l (jquery.min.js:3)
    at Object.fireWith [as resolveWith] (jquery.min.js:3)
    at Function.ready (jquery.min.js:3)
    at HTMLDocument.S (jquery.min.js:3)
    (anonymous) @ (index):1536
    l @ jquery.min.js:3
    fireWith @ jquery.min.js:3
    ready @ jquery.min.js:3
    S @ jquery.min.js:3
  • profile

    문제가 되는 모듈 스킨, 위젯 스킨 등에서 jquery.js 또는 jquery.min.js 등을 로딩하는 부분을 찾아서 모조리 지우세요. jquery 버전을 통일하는 가장 쉬운 방법은 코어에서 기본 제공되는 버전을 사용하는 것입니다. 제멋대로 버전을 바꾸는 예의없는 서드파티 자료들을 조져야 해요! ㅋㅋ

     

    위의 에러를 보면 팝업모듈이 기존의 jquery 버전을 사용했는데 나머지 두 자료 중 하나가 멋대로 jquery 버전을 바꾸는 바람에 팝업모듈이 피해자가 된 것 같습니다. 정황상 이미지슬라이딩 위젯에서 jquery를 따로 로딩하고 있을 가능성이 높아 보입니다. 찾아서 지워보세요.

  • profile profile
    php에서 로딩하는 독한놈들도 있습니다 ㅋㅋㅋ
  • profile profile

    다시 자세히 읽어보니 eh_whcarousel = 이미지슬라이딩 위젯이네요.
    list.html에서 jquery 로딩하는 부분을 지우면 될 것 같습니다.
    지워도 계속 문제가 있다면 다른 곳에도 또 있을 테니 다 찾아서 지워야겠고요...

  • profile

    <script type="text/javascript" src="/common/js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.waterwheelCarousel.js"></script>

    list.html 파일에서 이렇게 두개의 js 파일을 로드하는데 첫번째 것을 삭제하면 jquery 로드하는 첫번째 구문을 삭제했더니 이미지슬라이딩위젯이 작동하질 않는군요.대신 팝업은 잘 나옵니다.

     

    이걸로 봐서는 jquery 충돌문제 같지는 않아보이는데

    그래서 팝업오프너 애드온을 살펴보니 아래부분 근처에서 오류메세지를 보이는군요.

     

            // jQuery로 팝업 열기
            function setPopupScript($popupList) {

                Context::addCssFile('./addons/popup_opener/popup_opener.css');
                Context::addJsFile('./addons/popup_opener/jquery.popup_opener.1.5.4.3.js');

                Context::loadLang(_XE_PATH_.'modules/popup/lang');
                $msg_xe_popup = Context::getLang('msg_popup_do_not_display');

                $addPopupScript = '<script type="text/javascript">//<![CDATA['."\n";
                $addPopupScript .= "var msg_popup_do_not_display = '".$msg_xe_popup."';\n";
                $addPopupScript .= 'jQuery(function(){'."\n";

                if($popupList) {
                    if(!is_array($popupList)) $popupList = array($popupList);

                    foreach($popupList as $val){
                        $addPopupScript .= "jQuery('<div></div>',{id:'xe_popup".$val->popup_srl."'})";
                        $addPopupScript .= ".css({'position':'absolute','width':'".$val->width."px'})";
                        $addPopupScript .= ".xe_popup(".getPopupScript($val).");\n";
                    }
                }

     

    점점 복잡해집니다 ㅠ

     

  • profile

    jquery.popup_opener.js 파일입니다.

    혹시 $대신 (jQuery)로 표현한것 때문에 문제가 있지는 않은지요

     

    if(jQuery) jQuery.noConflict();
    
    (function($) {
    
        $.fn.xe_popup = function(options) {
    
            var options = $.extend({}, $.fn.xe_popup.defaults, options);
    
            return this.each(function() {
    
                var popup = $(this);
                var popupID = options.id;
                var popupCookieValue = getCookie(popupID);
    
    if (!popupCookieValue || popupCookieValue != "no") {
    
                    var popupbody = $("<div></div>").addClass('popupbody');
                    var popupcloser = $("<div></div>").addClass('popupcloser');
                    var popupcheckbox = $("<input type='checkbox' checked=checked />");
    var popup_message = msg_popup_do_not_display.replace('%d', options.exp_days).replace('%s', options.exp_days>1?'s':'');
                    var popupcloserhtml = $("<span>"+popup_message+"</span>");
                    var popupclosebutton = $('<button type="button"></button>');
    
    var elementID = options.element_id ? '#'+options.element_id : '';
    
    if ($(elementID).length>0) var targetBody = elementID;
    else var targetBody = document.body;
    
                    popup.appendTo(targetBody).addClass('xe_popup_'+options.popup_style).css({'top' : options.top+"px", 'left' : options.left+"px"});
                    popupbody.css({'height' : options.height+"px"});
    
                    if(options.popup_type == 'content') {
                        popupbody.html(options.content);
                        popup.show("fast");
                    } else if (options.popup_type == 'url') {
                        popupbody.load(options.url, function(){popup.show("fast")});
                    }
    
                    if (options.link) {
                        popupbody.css('cursor','pointer');
                        if (options.link_type == 'true')
                            popupbody.click(function(){window.open(options.link); popup.hide("fast");});
                        else
                            popupbody.click(function(){document.location.href=options.link;});
                    }
    
                    popupcheckbox.attr('id', popupID);
                    popupclosebutton.click(function(){
                        if (popupcheckbox.is(':checked')) {
                            setCookie(popupID, "no", options.exp_days);
                            popup.hide("fast", function(){$(this).remove();});
                        } else {
                            popup.hide("fast", function(){$(this).remove();});
                        }
                    });
    
                    if(options.popup_style == 'border' || options.popup_checkbox != 'N') {
    popupcloser.append(popupcheckbox);
    popupcloser.append(popupcloserhtml);
    }
                    popupcloser.append(popupclosebutton);
                    popup.append(popupbody);
                    popup.append(popupcloser);
                    popup.draggable();
                }
    
                function setCookie( id, value, exp_days ) {
                     var todayDate = new Date();
                     todayDate.setDate( parseInt(todayDate.getDate()) + parseInt(exp_days) );
                     document.cookie = id + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
                }
    
                function getCookie(name) {
                    var value=null, search=name+"=";
                    if (document.cookie.length > 0) {
                        var offset = document.cookie.indexOf(search);
                        if (offset != -1) {
                            offset += search.length;
                            var end = document.cookie.indexOf(";", offset);
                            if (end == -1) end = document.cookie.length;
                            value = unescape(document.cookie.substring(offset, end));
                        }
                    }
                    return value;
                }
    
            });
        };
    
        $.fn.xe_popup.defaults = {
            id: 'xe_popup',
            popup_type: 'content',
            content: 'No content!',
            open_type: 'inner',
            exp_days: '1',
            width: 300,
            height: 200,
            top: 0,
            left: 0,
            url: '/xe/',
            link: '',
            link_type: '',
            popup_title: 'xe_popup',
    popup_style: 'border',
    popup_checkbox: 'Y'
        };
    
    })(jQuery);