Question

我在这里有一个页面：http://desertcinema.com/home-test/

我想使用fancybox在我的投资组合部分为照片（youtube和vimeo）和照片库添加一个fancybox。

因为我正在使用Wordpress网站（自定义页面）。我访问header.php文件，并为fancybox的jQuery和CSS添加了cdn链接：

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

提前感谢您的帮助。

Answer 1

jquery插件不存在。检查控制台是否有错误。将它放在fancybox上面

Wordpress中的Fancybox视频弹出窗口？

1 个答案: