1
私はこちらのページがあります。http://desertcinema.com/home-test/WordPressのFancyboxビデオポップアップ？
をそして、私はビデオ（ユーチューブやVimeoの）とfancyboxを使用して、私のポートフォリオセクションの下の写真のための画像ギャラリーの両方のためのfancyboxを追加したいです。
私はWordpressのサイト（カスタムページ）に取り組んでおりますので。私はheader.phpのファイルにアクセスして、jQueryとfancyboxの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のファイルです：
私のHTMLに今<!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(); ?>
は、私はこれを追加しようとしましたinstructionごとのように、ここでのコード：
<a href="https://vimeo.com/169312968" class="more"></a>
ラップイメージにそれが現れることを確認する：
私はそれをしようとしたときしかし、それだけで私はリンクの内側に置くリンクに私をリンク<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を表示する必要があります。
ご協力いただきありがとうございます。
fancyboxの上に置きます。動いていない。 –