워드프레스에서 Fancybox를 사용하여 외부 URL 페이지를 라이트박스로 열기

Last Updated: 2023년 10월 03일 댓글

Fancybox를 사용하면 그림 등을 다양한 방식으로 라이트박스 형태로 열 수 있습니다. 특히 외부 URL 페이지를 팝업 형태로 열 수 있습니다. 워드프레스에는 Lightbox 플러그인이 많이 있는데, 대부분 그림에 사용되고 외부 URL에 사용되는 것으로는 Responsive Lightbox 플러그인이 있지만 테스트해보니 최신 워드프레스에서는 잘 되지 않는 것 같습니다.

이 글은 오래 전에 작성되었습니다. 현재 Responsive Lightbox & Gallery 등을 비롯하여 다양한 무료 및 유료 라이트박스 플러그인을 사용할 수 있습니다. 플러그인을 사용하면 수월하게 라이트박스 기능을 구현할 수 있습니다. CSS만을 사용하여 팝업(라이트박스) 기능을 구현하고 싶은 경우 "[CSS] 텍스트를 클릭하면 div가 팝업으로 표시되도록 하는 방법"을 참고할 수 있습니다.

워드프레스에서 Fancybox를 사용하여 외부 URL 페이지를 라이트박스로 열기

Fancybox

Fancybox는 단일 그림, 갤러리, 외부 URL, 유튜브, Vimeo 등의 동영상을 라이트박스 형태로 엽니다. 여기에서 여러 가지 실행을 확인해볼 수 있습니다.

워드프레스에서 Fancybox를 사용하려면 다음 단계에 따라 설치하면 됩니다:

  1. Fancybox 사이트를 방문하여 파일을 다운로드 받습니다.
  2. 파일의 압축을 풀고 fancybox 폴더를 통째로 테마 폴더 아래의 js 폴더 내에 복사합니다. (.../wp-content/themes/테마 퐆더/js/fancybox/...)
  3. 이 페이지의 지침을 참고로 워드프레스 함수 파일에 js 파일과 css 파일을 enqueue(후크)시킵니다. 후크시키는 방법은 WordPress Codex 페이지를 참고하시기 바랍니다.
  4. 이제 다음 코드를 복사하고 js 파일을 만들어 붙여넣기 합니다.
$(document).ready(function(){
$(".fancybox").fancybox({
openEffect  : 'none',
closeEffect : 'none',
iframe : {
preload: false
}
});
$(".various").fancybox({
maxWidth    : 800,
maxHeight    : 600,
fitToView    : false,
width        : '70%',
height        : '70%',
autoSize    : false,
closeClick    : false,
openEffect    : 'none',
closeEffect    : 'none'
});
$('.fancybox-media').fancybox({
openEffect  : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
//Source: http://www.lets-develop.com/

새로 만든 js 파일도 테마 함수 파일에 등록하여 Enqueue시키도록 합니다.

Fancybox enqueue 예:

function fancybox_scripts() {
wp_enqueue_script( 'fancyboxmouswheel', get_stylesheet_directory_uri() . '/js/fancybox/lib/jquery.mousewheel-3.0.6.pack.js', array('jquery'), '51150410', true );
wp_enqueue_script( 'fancybox', get_stylesheet_directory_uri() . '/js/fancybox/source/jquery.fancybox.pack.js', array('jquery'), '51150411', true );
wp_enqueue_script( 'fancyboxbutton', get_stylesheet_directory_uri() . '/js/fancybox/source/helpers/jquery.fancybox-buttons.js', array('jquery'), '51150412', true );
wp_enqueue_script( 'fancyboxmedia', get_stylesheet_directory_uri() . '/js/fancybox/source/helpers/jquery.fancybox-media.js', array('jquery'), '51150413', true );
wp_enqueue_script( 'fancyboxthumbs', get_stylesheet_directory_uri() . '/js/fancybox/source/helpers/jquery.fancybox-thumbs.js', array('jquery'), '51150414', true );
wp_enqueue_script( 'fancyboxvarious', get_stylesheet_directory_uri() . '/js/fancybox/fancybox_scripts.js', array('jquery'), '51150415', true );
wp_enqueue_style('fancyboxcss', get_stylesheet_directory_uri().'/js/fancybox/source/jquery.fancybox.css');
wp_enqueue_style('fancyboxcssbuttons', get_stylesheet_directory_uri().'/js/fancybox/source/helpers/jquery.fancybox-buttons.css');
wp_enqueue_style('fancyboxcssthumbs', get_stylesheet_directory_uri().'/js/fancybox/source/helpers/jquery.fancybox-thumbs.css');
}
add_action( 'wp_enqueue_scripts', 'fancybox_scripts' );

이제 이 페이지의 How to use Fancybox showing media 부분의 사용법을 참고로 라이트박스 기능을 사용할 수 있습니다.

참고:


댓글 남기기

Leave a Comment