Jquery 2.1.1 & 灯箱冲突
Jquery 2.1.1 & Lightbox Conflict
我想在一页中上传照片和灯箱,但是当我对其进行编码时,我与 jquery-2.1.1 和灯箱 js 发生冲突。尝试使用 jQuery.conflict();没有解决我的问题,而是出现了另一个 "jQuery.easing[jQuery.easing.def] is not a function".
我的原码是这个
<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>
先改变你的link
来自
<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
与每个 other.The 冲突的事情,您可以做的是将所有 jquery 代码放在页面底部 lightbox-plus-jquery.min.js
之后。这是 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 和灯箱 js 发生冲突。尝试使用 jQuery.conflict();没有解决我的问题,而是出现了另一个 "jQuery.easing[jQuery.easing.def] is not a function".
我的原码是这个
<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>
先改变你的link 来自
<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
与每个 other.The 冲突的事情,您可以做的是将所有 jquery 代码放在页面底部 lightbox-plus-jquery.min.js
之后。这是 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>