질문/조언팁/리소스 공유

다운로드 : jquery.magnific-popup-dist.zip - magnific github :  https://github.com/dimsemenov/Magnific-Popup

 

http://dimsemenov.com/plugins/magnific-popup/ 에서 샘플을 보시면 이미지 콘텐츠의 경우 팝업 레이어 이미지 하단에 캡션이 출력됩니다.

adsffasd.png

 

위 그림과 같이 이미지에서는 되지만,  유튜브 , Vimeo video , 구글 맵에서는 캡션이 작동하지 않습니다.

 

출력되게 하려면 아래와 같이 처리해주시면 되겠습니다.

 

1.첨부된 파일을 압축 해제후..

아래 두 파일을 원하는 페이지 혹은 레이아웃에서 로딩을 해줍니다.

magnific-popup.css

jquery.magnific-popup.min.js 

 

2.html 코드를 삽입

<a class="popup-youtube" href="https://www.youtube.com/watch?v=qwqjc3ZapQM" title="볼륨을 높혀 주세요. 내레이션이 포함된 영상입니다.">소개 영상</a></span>

 

title 에 텍스트를 입력해 주시면 됩니다.

title 속성을 지워주시면 캡션이 출력되지 않습니다.

html 태그도 사용 가능합니다.

 

3.javascript 추가

XE,라이믹스에서는 아래의 내용을 사용중인 레이아웃 혹은 해당 페이지에서 사용중인 js 파일 제일 하단에 넣어 두시면 좋겠습니다.

 

jQuery(document).ready(function() {
    jQuery('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: false,
        callbacks: {
            close: function() {
              jQuery('.mfp-bottom-bar').remove();
            }
        }
    });

    jQuery('.popup-youtube').on('mfpOpen', function() {
        if(typeof jQuery(this).attr('title') != "undefined"){
            jQuery('.mfp-content').append("<div class='mfp-bottom-bar'><div class='mfp-title'>"+jQuery(this).attr('title')+"</div></div>");
        }
    });
});

 

4.css 를 추가합니다.

.mfp-bottom-bar{

margin-top:10px !important;

}

 

샘플보기

유튜브의 경우 모바일에서는 새창으로 재생될수 있으니 PC로 확인하셔야 합니다.

 

https://catenater.com/buyhelp 

 

"소개  영상" 을 클릭하시면 됩니다.


서버에 요청 중입니다. 잠시만 기다려 주십시오...