이미지 클릭시 레이어 팝업창이 뜨게 만들었는데 사이트에 적용하면 작동하지않습니다.

조회수 888회

사이트에 적용시켜보니 작동을 하지않습니다. 어디서 충돌이 나는건지 도저히 모르겠습니다...

콘솔에는

Uncaught TypeError: $(...).gb_quick_menu is not a function
    at HTMLDocument.<anonymous> (gd_ui.js?ts=1581310219:3)
    at j (jquery.min.js?ts=1580477581:2)
    at Object.fireWith [as resolveWith] (jquery.min.js?ts=1580477581:2)
    at Function.ready (jquery.min.js?ts=1580477581:2)
    at HTMLDocument.J (jquery.min.js?ts=1580477581:2)

이렇게 나오는데 잘 모르겠습니다

2 답변

  • <script>
    $(".popupVideo a").click(function() {
        $(".video-popup").addClass("reveal"),
        $(".video-popup .video-wrapper").remove(),
        $(".video-popup").append("<div class='video-wrapper'><iframe width='560' height='315' src='https://youtube.com/embed/" + $(this).data("video") + "?rel=0&playsinline=1&autoplay=1' allow='autoplay; encrypted-media' allowfullscreen></iframe></div>")
    }),
    $(".video-popup-closer").click(function() {
        $(".video-popup .video-wrapper").remove(),
        $(".video-popup").removeClass("reveal")
    });
    </script>
    

    위 코드를 .popupVideo.video-popup-closer 아래로 내려보세요.

    <div class="popupVideo">
    
      <a data-video="EwqH5T-dgSw">
        <img src="http://www.flow7.co.kr/data/video/yt/yt4.jpg"width="580px" height="330px" style="padding: 12px;border: groove">
      </a>
      <a data-video="SThbKbhJ1Hg">
        <img src="http://www.flow7.co.kr/data/video/yt/yt1.jpg"width="580px" height="330px" style="padding: 12px;border: groove">
      </a>
        <a data-video="SThbKbhJ1Hg">
        <img src="http://www.flow7.co.kr/data/video/yt/yt2.jpg"width="580px" height="330px" style="padding: 12px;border: groove">
      </a>
        <a data-video="SThbKbhJ1Hg">
        <img src="http://www.flow7.co.kr/data/video/yt/yt3.jpg"width="580px" height="330px" style="padding: 12px;border: groove">
      </a>
        <a data-video="SThbKbhJ1Hg">
        <img src="http://www.flow7.co.kr/data/video/yt/yt5.jpg"width="580px" height="330px" style="padding: 12px;border: groove">
      </a>
          <a data-video="SThbKbhJ1Hg">
        <img src="http://www.flow7.co.kr/data/video/yt/yt6.jpg"width="580px" height="330px" style="padding: 12px;border: groove">
      </a>
          <a data-video="SThbKbhJ1Hg">
        <img src="http://www.flow7.co.kr/data/video/yt/yt7.jpg"width="580px" height="330px" style="padding: 12px;border: groove">
      </a>  
    </div>
    <div class="video-popup">
      <div class="video-popup-closer"></div>
    </div>
    <!-- 여기 -->
    

    그리고 문장의 종료를 콤마,로 작성하면 버그를 유발할 수 있습니다.

    // X
    $(".video-popup").addClass("reveal"),
    $(".video-popup .video-wrapper").remove(),
    
    // O
    $(".video-popup").addClass("reveal");
    $(".video-popup .video-wrapper").remove();
    
    • 순서랑 콤마바꾸니까 됩니다! 감사합니다. 순서가 중요한거였군요 정말 감사합니다 알 수 없는 사용자 2020.2.12 14:43
    • 혹시 한가지만 더 여쭤봐도 될까요? http://www.flow7.co.kr/main/html.php?htmid=board/reviewtest.html 여기페이지에 적용시켜서 팝업창뜨는것까지는 되는데 오른쪽으로 치우쳐서 짤리게 되는데 봐주실수 있을까요.... 죄송합니다 .video-wrapper 안에 .video-wrapper iframe 의 위치가 오른쪽위로 출력이됩니다 알 수 없는 사용자 2020.2.12 14:51
    • 어디서 설정을 하는건지는 모르겠으나 해당 팝업의 구성요소 중 iframe 태그에 text-align: center 스타일이 적용되어 있습니다. 이걸 지워야됩니다. 편집요청빌런 2020.2.12 14:59
    • text-align: center 를 지우고 height 를 지정해주니까 해결되었습니다 감사합니다~! 알 수 없는 사용자 2020.2.12 15:07
  • unreachable code after return statement: gd_common.js:165:37 SyntaxError: unexpected token: '.': html.php:93:10

    var window.dataLayer = window.dataLayer || [];
    

    문법 오류입니다. var를 빼세요.

    "http://wcs.naver.net/wcslog.js" 소스의 로딩을 실패하였습니다. html.php:142:1 ReferenceError: wcs is not defined naverCommonInflowScript.js:40:1

    원인은 모르겠으나 스크립트 http://wcs.naver.net/wcslog.js를 불러오지 못했고, 따라서 wcs가 정의되지 않았습니다.

    TypeError: $(...).gb_quick_menu is not a function: gd_ui.js:3:42

    $('#scroll_right, #scroll_left').gb_quick_menu({
        //HEADER_ID: '#header_warp'
    });
    

    gb_quick_menu라는 jQuery 확장 메서드가 정의되지 않았답니다. gd_ui.js의 $.fn.gb_quick_menu 정의 부분이 제대로 실행되고 있는지 확인해보세요.

    • 다시 에러를 봤는데 이제 뜨지않습니다. 고도몰에 연결되있는 사이트에 새로 페이지를 만드는중인데 코드가 맞는거같은데 고도몰사이트에 적용을시키면 작동을 하지않는데 혹시 이유가 뭔지 알려주실수있나요? 원래 고도몰에서는 안되는건가요? 고도몰에 연결되있는 사이트에 새로 페이지를 만드는중인데 코드가 맞는거같은데 고도몰사이트에 적용을시키면 안되는건가요? https://codepen.io/chpark/pen/OJVJYQe 여기에 전체코드로 다시 만들어봤는데 이곳에서는 잘 나옵니다... 알 수 없는 사용자 2020.2.12 13:42
    • 고도몰이 뭔가요? 문제가 있는 사이트의 주소를 알려주세요. 편집요청빌런 2020.2.12 13:49
    • 질문이 이해가 안됩니다만, 일단 jquery.min.js 스크립트가 없으면 jQuery 관련 코드를 쓸 수 없는건 당연하구요. http://www.flow7.co.kr/main/html.php?htmid=service/reviewtest.html 여기가 문제가 있는 사이트가 맞나요? 들어가서 사진 클릭해봐도 아무런 작동도, 오류도 안나는데요. 편집요청빌런 2020.2.12 14:01

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)