FancyBox Jquery冲突无法弄清楚冲突

时间:2016-09-12 17:50:39

标签: javascript php jquery ajax

我正在尝试在网站上使用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 &raquo;</a></div><div class="button-link" 
style="float:left; margin-right:15px"><a href="#"> &laquo; Sign Up </a>   
</div></div>
<!--First set of divs -->

有人请帮助我拍摄麻烦......我想我看到了这个ajax的问题 var um_ajaxurl =“”; 我只是不确定。

1 个答案:

答案 0 :(得分:0)

感谢大家的帮助。为了解决这个问题,我刚刚安装了FancyBox wordpress登录,这就解决了这个问题。