我想在一个页面中上传照片和一个灯箱，但是当我编码它时，我与我的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>
我想知道，因为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>
先更改链接从
<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相互冲突。您可以做的是将所有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>