Всплывающее видео Fancybox в Wordpress?

У меня есть страница здесь: http://desertcinema.com/home-test/

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

Так как я работаю над сайтом Wordpress (пользовательская страница). Я получаю доступ к файлу header.php и добавляю ссылки cdn как для 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 я попытался добавить эти коды здесь в соответствии с инструкцией:

 <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>

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

Any idea what I am doing wrong? I really need to show up a responsive pop up/ligthbox for each image both video and image gallery.

Заранее спасибо за помощь.

Kimberly Wright 15.06.2016 источник

Ответы (1)

arrow_upward
0
arrow_downward

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

SESN 15.06.2016

Всплывающее видео Fancybox в Wordpress?

Ответы (1)

Похожие вопросы