Question

在个人网站上工作。我有两件使用jquery操作的东西 - 图片库和倒数计时器。我知道由于库和文件不同，jquery变得混乱/无法正常运行。我曾尝试使用jquery的noconflict（），但一直没有成功。如果我完全注释掉其他代码，我只能运行图库或倒数计时器。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="CSS/styles.css">
    <link rel='stylesheet' id='camera-css'  href='CSS/camera.css' type='text/css' media='all'>
    <link rel="stylesheet" type="text/css" href="CSS/countdown/style.css">
    <link rel="stylesheet" type="text/css" href="CSS/countdown/icomonn.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

    <script type="text/javascript" src="JS/scripts.js"></script>
    <!-- Camera Gallery JS -->
    <script type="text/javascript" src="JS/camera/jquery.min.js"></script>
    <script type="text/javascript" src="JS/camera/jquery.mobile.customized.min.js"></script>
    <script type="text/javascript" src="JS/camera/jquery.easing.1.3.js"></script> 
    <script type="text/javascript" src="JS/camera/camera.min.js"></script>
    <script type="text/javascript" src="JS/camera/camera.js"></script>                 
    <!-- Circular Countdown JS -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>       
    <script type="text/javascript" src="JS/countdown/init.js"></script>
    <script type="text/javascript" src="JS/countdown/jquery.ccountdown.js"></script>
    <script type="text/javascript" src="JS/countdown/jquery.knob.js"></script>
    <!--[if lt IE 8]> <script type="text/javascript" src="JS/countdown/lte-ie7.js"></script> <![endif]-->

    <script>
        jQuery(function(){
            jQuery('#gallery').camera({
                height: '400px',
                pagination: false,
                thumbnails: true
            });
        });
    </script>
    <style>         
    .fluid_container {
        margin: 0 auto;
        max-width: 1000px;
        width: 90%;
    }
    </style>
</head>

<body>
    <section class="red">
    <a name="C & I"> </a>
    <p> C & I </p>

    <div class="ccounter">
        <input class="knob days" data-width="160" data-min="0" data-max="365" data-displayPrevious=true data-fgColor="#000000" data-readOnly="true" value="1">
        <input class="knob hour" data-width="160" data-min="0" data-max="24" data-displayPrevious=true data-fgColor="#000000" data-readOnly="true" value="1">
        <input class="knob minute" data-width="160" data-min="0" data-max="60" data-displayPrevious=true data-fgColor="#000000" data-readOnly="true" value="1">
        <input class="knob second" data-width="160" data-min="0" data-max="60" data-displayPrevious=true data-fgColor="#000000" data-readOnly="true" value="0" data-bgcolor="#eee">
    </div>

<script>
$(".ccounter").ccountdown(2015,12,25,'18:00');
</script>




    </section>

    <section class="green">
        <a name="Our Story"></a>
        <p> Our Story </p>


    </section>
    <section class="charcoal">
    <a name="Gallery"></a>
    <h1> Gallery </h1>
        <div class="fluid_container">
            <div class="camera_wrap camera_azure_skin" id="gallery">
                <div data-thumb="images/slides/thumbs/one.gif" data-src="images/slides/one.jpg"></div>

                <div data-thumb="images/slides/thumbs/two.gif" data-src="images/slides/two.jpg"></div>

                <div data-thumb="images/slides/thumbs/road.jpg" data-src="images/slides/road.jpg"></div>

                <div data-thumb="images/slides/thumbs/sea.jpg" data-src="images/slides/sea.jpg"></div>

                <div data-thumb="images/slides/thumbs/shelter.jpg" data-src="images/slides/shelter.jpg"></div>

                <div data-thumb="images/slides/thumbs/tree.jpg" data-src="images/slides/tree.jpg"></div>
            </div><!-- #camera_wrap_2 -->
        </div><!-- .fluid_container -->



    </section>
</body>

Answer 1

问题是相机插件被添加到jQuery的第一个实例中，但是当你尝试使用jQuery时它指的是第二个版本（1.7.0），因此它将无法访问相机插件所以< / p>

<script type="text/javascript" src="JS/scripts.js"></script>
<!-- Camera Gallery JS -->
<script type="text/javascript" src="JS/camera/jquery.min.js"></script>
<script type="text/javascript" src="JS/camera/jquery.mobile.customized.min.js"></script>
<script type="text/javascript" src="JS/camera/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="JS/camera/camera.min.js"></script>
<script type="text/javascript" src="JS/camera/camera.js"></script>                 
<script>
var jq = jQuery.noConflict(true);
</script>
<!-- Circular Countdown JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>       
<script type="text/javascript" src="JS/countdown/init.js"></script>
<script type="text/javascript" src="JS/countdown/jquery.ccountdown.js"></script>
<script type="text/javascript" src="JS/countdown/jquery.knob.js"></script>
<!--[if lt IE 8]> <script type="text/javascript" src="JS/countdown/lte-ie7.js"></script> <![endif]-->

<script>
    //The camera plugin is added to jq so
    jq(function($){
        $('#gallery').camera({
            height: '400px',
            pagination: false,
            thumbnails: true
        });
    });
</script>

但您可以探索的另一个解决方案是使用最新版本的jQuery和jQuery migrate plugin以实现向后兼容性 - 以支持未升级到更新版本jQuery的插件

Jquery冲突。图库和倒计时器

1 个答案: