jQuery冲突.图片库和倒计时计时器

在个人网站上工作。我有两件事使用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>

问题是摄像机插件已添加到jQuery的第一个实例中，但是当您尝试使用jQuery时，它是指第二版（1.7.0），因此不会可以访问相机插件SO

<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的最新版本用于向后兼容 - 支持未升级到jquery

的较新版本的插件

相关内容

最新更新

热门标签：