Всплывающее окно Fancybox в Wordpress?

У меня есть страница здесь: http://desertcinema.com/home-test/Всплывающее окно Fancybox в Wordpress?

И я хочу, чтобы добавить FancyBox для видео (YouTube и Vimeo) и галереи изображений для фотографий под моим портфолио раздел с использованием fancybox.

Поскольку я работаю на Wordpress сайта (пользовательские страницы). Я доступ header.php файл и добавил КДС ссылки на как JQuery и CSS в FancyBox:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" type="text/css" media="screen" />

Вот файл header.php:

<!DOCTYPE html> 
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"> <![endif]--> 
<!--[if gt IE 8]> 
<!--><html <?php language_attributes(); ?>><!--<![endif]--> 
<?php 
global $theme_option; 
global $wp_query; 
    $seo_title = get_post_meta($wp_query->get_queried_object_id(), "_cmb_seo_title", true); 
    $seo_description = get_post_meta($wp_query->get_queried_object_id(), "_cmb_seo_description", true); 
    $seo_keywords = get_post_meta($wp_query->get_queried_object_id(), "_cmb_seo_keywords", true); 
?> 
<head> 
    <!-- Basic Page Needs 
    ================================================== --> 
    <meta charset="<?php bloginfo('charset'); ?>"> 
    <title><?php bloginfo('name'); ?> <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title> 
    <meta name="author" content="<?php if(isset($theme_option['text_facebook']) && $theme_option['text_facebook'] != ''){echo $theme_option['text_facebook'];}else{echo 'Vergatheme';} ?>"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

    <!-- Mobile Specific Metas 
    ================================================== --> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <?php if($seo_description!="") { ?> 

    <?php }elseif($theme_option['seo_des']){ ?> 
    <meta name="description" content="<?php echo $theme_option['seo_des']; ?>"> 
    <?php } ?> 
    <?php if($seo_keywords!="") { ?> 
    <meta name="keywords" content="<?php echo $seo_keywords; ?>"> 
    <?php }elseif($theme_option['seo_key']){ ?> 
    <meta name="keywords" content="<?php echo $theme_option['seo_key']; ?>"> 
    <?php } ?> 
    <!-- CSS 
    ================================================== --> 
    <!-- Favicons 
    ================================================== --> 
    <link rel="shortcut icon" href="<?php echo $theme_option['favicon']['url']; ?>" type="image/png"> 
    <link rel="apple-touch-icon" href="<?php echo $theme_option['apple_icon']['url']; ?>"> 
    <link rel="apple-touch-icon" sizes="72x72" href="<?php echo $theme_option['apple_icon_72']['url']; ?>"> 
    <link rel="apple-touch-icon" sizes="114x114" href="<?php echo $theme_option['apple_icon_114']['url']; ?>"> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" type="text/css" media="screen" /> 


<?php wp_head(); ?>

Теперь на моем HTML я пытался добавить этот коды здесь, как в instruction:

<a href="https://vimeo.com/169312968" class="more"></a>

виткам изображение, чтобы убедиться, что она появляется:

<li class="portfolio-box video-production ">  
        <a href="https://vimeo.com/169312968" class="more"> 
         <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/ilive-1-31nhrb4atwt3ix3v5bwef4.jpg" alt="" /> 
         <div class="mask"></div> 
         <div class="line-folio"></div> 
         <div class="line-folio1"></div> 
         <h4>iLiveAccountable</h4> 
        </a>  
       </li>

Теперь, чтобы окончательно сделать его работу я создал скрипт, который я помещаю в сноске моей пользовательской страницы:

<script> 
$("a.more").click(function() { 
    $.fancybox({ 
      'padding'  : 0, 
      'autoScale'  : false, 
      'transitionIn' : 'none', 
      'transitionOut' : 'none', 
      'title'   : this.title, 
      'width'  : 680, 
      'height'  : 495, 
      'href'   : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 
      'type'   : 'swf', 
      'swf'   : { 
       'wmode'  : 'transparent', 
       'allowfullscreen' : 'true' 
      } 
     }); 

    return false; 
}); 
</script>

Однако, когда я попробовал, это просто связать меня по ссылке я место внутри ссылки я представил:

Любая идея, что я делаю не так? Мне действительно нужно показать отзывчивый всплывающий/ligthbox для каждого изображения и видео и галерею изображений.

Заранее благодарим за помощь.

источник

2016-06-15 Kimberly Wright

Плагин jquery отсутствует. Проверьте консоль на наличие ошибок. Поместите его над FancyBox

источник

2016-06-15 04:48:48 SESN

она есть. Это не работает. –

Всплывающее окно Fancybox в Wordpress?

ответ

Смежные вопросы