Fancybox

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

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

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 부분의 사용법을 참고로 라이트박스 기능을 사용할 수 있습니다.

참고:



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.