Question

我希望在一个页面上有一个照片上传和灯箱，但是当我编码它时，我与我的jquery-2.1.1和lightbox 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 与之冲突您可以做的事情是在lightbox-plus-jquery.min.js之后将所有jquery代码放在页面的底部。以下是lightbox

中的一个简单示例

<!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＆amp;灯箱冲突

2 个答案: