我正在尝试在网站上使用FancyBox。我有演示工作,所以我知道它的工作原理。问题是,当我尝试在wordpress主题中使用它时,我得到了错误
未捕获TypeError:$(...)。fancybox不是函数
这是头文件
<?php if(!$wp_rewrite->using_permalinks()){ wp_die(__("This theme
requires permalinks enabled","um_lang")); }; ?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="p:domain_verify" content="ac6fb8c0ff447de57e6487a06da75303"/>
<script>
(function(i,s,o,g,r,a,m)
{i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new
Date();a=s.createElement(o),
m=s.getElementsByTagName(o)
[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-
analytics.com/analytics.js','ga');
ga('create', 'UA-66723494-1', 'auto');
ga('send', 'pageview');
</script>
<meta name="google-translate-customization" content="565a3d6039e2479e-
f66d7bf5a76ac887-g9cf92c01fdfc4e35-20"></meta>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-
width: 480px)" href="styler.css" />
<link href='<?php echo get_stylesheet_directory_uri(); ?>/style.css'
rel='stylesheet' type='text/css'>
<?php if(get_field("site_favico","options")): ?>
<link rel="icon" type="image/png" href="<?php
the_field("site_favico","options"); ?>">
<?php endif; ?>
<?php
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'googleMaps',"https://maps.googleapis.com/maps/api/js?
v=3.exp&sensor=false",false,1.0,true );
wp_enqueue_script("jsonify",
get_template_directory_uri()."/script/json2.js" , false, "1.0",true);
wp_enqueue_script("base64",
get_template_directory_uri()."/script/base64.js" , false, "1.0",true);
wp_enqueue_script("gmaps",
get_template_directory_uri()."/script/gmaps.js" , false, "1.0",true);
wp_enqueue_script("scrollTo",
get_template_directory_uri()."/script/jquery.scrollTo-1.4.3.1-min.js" ,
false, "1.0",true);
wp_enqueue_script("serialScroll",
get_template_directory_uri()."/script/jquery.serialScroll-1.2.2-min.js" ,
false, "1.0",true);
wp_enqueue_script("script",
get_template_directory_uri()."/script/script.js" , false, "1.0",true);
wp_enqueue_script("prettify",
get_template_directory_uri()."/script/prettify/prettify.js" , false,
"1.0",true);
wp_enqueue_script("mousewheel",
get_template_directory_uri()."/lib/jquery.mousewheel-3.0.6.pack.js" ,
false, "1.0",true);
wp_enqueue_script("fancybox",
get_template_directory_uri()."/source/jquery.fancybox.js?v=2.1.5" ,
false, "1.0",true);
wp_enqueue_script("buttonhelper",
get_template_directory_uri()."/source/helpers/jquery.fancybox-buttons.js?
v=1.0.5" , false, "1.0",true);
wp_enqueue_script("thumbnail",
get_template_directory_uri()."/source/helpers/jquery.fancybox-thumbs.js?
v=1.0.7" , false, "1.0",true);
wp_enqueue_script("mediahelper",
get_template_directory_uri()."/source/helpers/jquery.fancybox-media.js?
v=1.0.6" , false, "1.0",true);
if ( is_singular() && get_option( 'thread_comments' ) )
{
wp_enqueue_script( 'comment-reply' );
}
?>
<title><?php echo get_bloginfo("name")." | ";wp_title( ' ', true, 'right'
); ?></title>
<script>
var template_directory = "<?php echo get_template_directory_uri(); ?
>";
var um_ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
</script>
<?php if(get_field("custom_javascript","options")): ?>
<script><?php the_field("custom_javascript","options"); ?></script>
<?php endif;?>
<?php wp_head(); ?>
<?php if(get_field("custom_css","options")): ?>
<style><?php the_field("custom_css","options"); ?></style>
<?php endif;?>
<link rel="stylesheet" type="text/css"
href="http://carsglobalcenter.com/source/jquery.fancybox.css?v=2.1.5"
media="screen" />
<link rel="stylesheet" type="text/css"
href="http://carsglobalcenter.com/source/helpers/jquery.fancybox-
buttons.css?v=1.0.5" />
<link rel="stylesheet" type="text/css"
href="http://carsglobalcenter.com/source/helpers/jquery.fancybox-
thumbs.css?v=1.0.7" />
</head>
<body <?php body_class(); ?>>
<div id="wrapper">
<div style="width:25.000em; margin-left:auto; margin-right:auto;
padding:25px" id="search">
<?php get_search_form(TRUE); ?></div>
<?php echo do_shortcode('[line_menu menu="mini" type="viola"]' ); ?>
<div id="header">
<?php if ( is_page( 'Home 2' )) putRevSlider("homeslider") ?>
<div id="inner_content">
<div id="content">
<?php if(get_field("display_breadcrumb","options") != "Not Visible"): ?>
<!-- Bread Crumb -->
<div class="bread_crumb col_12">
<?php display_breadcrumbs(); ?>
</div>
<!-- End Bread Crumb -->
<?php endif; ?>
<?php //if ( is_page( 'Home 2' )) putRevSlider("homeslider") ?>
AND主页模板
<?php
/*
Template Name:Home
*/
?>
<?php get_header(); ?>
<script type="text/javascript">
<!--var $= jQuery.noConflict();-->
var $ = jQuery.noConflict();
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/*
* Different effects
*/
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});
// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'over'
}
}
});
// Set custom style, close if clicked, change title type and
overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,
openEffect : 'none',
helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});
// Remove padding, set opening and closing animations, close if
clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
/*
* Button helper. Disable animations, hide close button, change
title type and content
*/
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' +
this.group.length + (this.title ? ' - ' + this.title : '');
}
});
/*
* Thumbnail helper. Disable animations, hide close button,
arrows and slide to next gallery item if clicked
*/
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
/*
* Media helper. Group items, disable animations, hide arrows,
enable media and button helpers.
*/
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
arrows : false,
helpers : {
media : {},
buttons : {}
}
});
/*
* Open manually
*/
$("#fancybox-manual-a").click(function() {
$.fancybox.open('1_b.jpg');
});
$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : 'iframe.html',
type : 'iframe',
padding : 5
});
});
$("#fancybox-manual-c").click(function() {
$.fancybox.open([
{
href : '1_b.jpg',
title : 'My title'
}, {
href : '2_b.jpg',
title : '2nd title'
}, {
href : '3_b.jpg'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
<!-- Sign up / Sign in divs -->
<div>
<a class="fancybox" href="http://carsglobalcenter.com/demo/1_b.jpg" data-
fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img
src="http://carsglobalcenter.com/demo/1_s.jpg" alt="" /></a>
<a class="fancybox" href="http://carsglobalcenter.com/demo/2_b.jpg" data-
fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img
src="http://carsglobalcenter.com/demo/2_s.jpg" alt="" /></a>
<a class="fancybox" href="http://carsglobalcenter.com/demo/3_b.jpg" data-
fancybox-group="gallery" title="Cras neque mi, semper leon"><img
src="http://carsglobalcenter.com/demo/3_s.jpg" alt="" /></a>
<a class="fancybox" href="http://carsglobalcenter.com/demo/4_b.jpg" data-
fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img
src="http://carsglobalcenter.com/demo/4_s.jpg" alt="" /></a>
<div class="button-link" style="float:left"> <a
href="http://carsglobalcenter.com/demo/iframe.html" class="fancybox
fancybox.iframe">Sign In »</a></div><div class="button-link"
style="float:left; margin-right:15px"><a href="#"> « Sign Up </a>
</div></div>
<!--First set of divs -->
有人请帮助我拍摄麻烦......我想我看到了这个ajax的问题 var um_ajaxurl =“”; 我只是不确定。
答案 0 :(得分:0)
感谢大家的帮助。为了解决这个问题,我刚刚安装了FancyBox wordpress登录,这就解决了这个问题。