jQuery 2.1.1和灯箱冲突

Question

我想在一张页面中上传照片和一个灯箱，但是当我编码时，我与我的jquery-2.1.1和灯箱js发生冲突。 试图使用jQuery.conflict（）; 而不是解决我的问题，出现了另一个问题“ jQuery.easing [jQuery.easing.def]不是一个函数”。

我原来的代码就是这个。

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
 <script type="text/javascript" src="js/lightbox-plus-jquery.min.js"></script>`

<a href='assets/uploads/" . $v['path'] ."' data-lightbox='image-". $v['path'] ."'>

echo "<a href='assets/uploads/" . $v['path'] ."' data-lightbox='image-". $v['path'] ."'>
     <img style='width: 200px;' class='example-image' src='assets/uploads/" .$v['path'] ."' alt='img-1'>
</a>";

<form id="imageform" method="post" enctype="multipart/form-data" action='php/exec/add-collection-exec.php' style="clear:both">
    <div id='imageloadstatus'><img src="assets/loader.gif" alt="Uploading...."/></div>
    <div id='imageloadbutton'>
        <div class='file-field input-field'>
            <div class='btn'>
                <span>Image</span>
                <input type="file" name="file[]" id="photoimg" multiple="true"/>
            </div>
            <div class="file-path-wrapper">
                <input class="file-path validate" type="text">
            </div>
        </div>
    </div>
</form>

<script type="text/javascript">
  lightbox.option({
    'resizeDuration': 1,
    'wrapAround': true,
    'fitImagesInViewport' : true,
    'disableScrolling' : true
  })


      $(document).ready(function(){
    $('#photoimg').on('change', function(){
      var A=$("#imageloadstatus");
      var B=$("#imageloadbutton");
      $("#imageform").ajaxForm({target: "#preview",
        beforeSubmit:function(){
          A.show();
          B.hide();
        },
        success:function(){
          A.hide();
          B.show();
          location.assign("uploads.php");
        },
        error:function(){
          A.hide();
          B.show();
        } 
        }).submit();
    }); });
</script>

Answer 1

我想知道，因为lightbox-plus-jquery.min.js包含jQuery。 我认为，之前无需包含jquery-2.1.1.min.js 。

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/lightbox-plus-jquery.min.js"></script>

Answer 2

首先改变你的链接从

<a href='assets/uploads/" . $v['path'] ."' data-lightbox='image-". $v['path'] ."'>

echo "<a href='assets/uploads/" . $v['path'] ."' data-lightbox='image-". $v['path'] ."'>
     <img style='width: 200px;' class='example-image' src='assets/uploads/" .$v['path'] ."' alt='img-1'>
</a>";

至

echo "<a href='assets/uploads/" . $v['path'] ."' data-lightbox='image-". $v['path'] ."'>
          <img style='width: 200px;' class='example-image' src='assets/uploads/" .$v['path'] ."' alt='img-1'>
      </a>";

并且不需要添加您的jquery-2.1.1.min.js因为lightbox-plus-jquery.min.js已经具有jquery，当然在页面中添加另一个jquery会导致two jquery相互冲突的two jquery 。您可以做的就是将所有jquery代码放在lightbox-plus-jquery.min.js之后的页面底部。 这是灯箱中的一个简单示例

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <title>Lightbox Example</title>
  <link rel="stylesheet" href="http://lokeshdhakar.com/projects/lightbox2/css/lightbox.css">
</head>
<body>

  <section>
    <h3>Click me to check if jquery is working</h3>
    <div>
      <a class="example-image-link" 
         href="http://lokeshdhakar.com/projects/lightbox2/images/image-1.jpg" 
         data-lightbox="example-1">

         <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-1.jpg" alt="image-1" />
      </a>
    </div>

    <hr />

    <h3>Click me to check if jquery is working</h3>
    <div>
      <a class="example-image-link" 
          href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" 
          data-lightbox="example-set" 
          data-title="Click the right half of the image to move forward.">
          <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/>
      </a>
    </div>
  </section>

  <script src="http://lokeshdhakar.com/projects/lightbox2/js/lightbox-plus-jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
        $("h3").click(function(){
          alert(1);
        });
    });
  </script>
</body>
</html>

jQuery 2.1.1和灯箱冲突

问题描述

2 个解决方案

解决方案1
0 2016-02-03 07:25:37

解决方案2
0 已采纳 2016-02-03 08:41:28

jQuery 2.1.1和灯箱冲突

问题描述

2 个解决方案

解决方案1 0 2016-02-03 07:25:37

解决方案2 0 已采纳 2016-02-03 08:41:28

解决方案1
0 2016-02-03 07:25:37

解决方案2
0 已采纳 2016-02-03 08:41:28