Javascript 两个脚本之间的冲突';链接
我想应用一种图像过滤技术,还想让图像在一个奇特的盒子中打开,我添加了代码并创建了指向我需要的脚本的链接,但同时添加了以下脚本链接:Javascript 两个脚本之间的冲突';链接,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我想应用一种图像过滤技术,还想让图像在一个奇特的盒子中打开,我添加了代码并创建了指向我需要的脚本的链接,但同时添加了以下脚本链接: 在过滤链接和脚本上方,过滤器工作,但花式方框不想工作;在花式方框链接和脚本上方添加相同的链接时,花式方框工作,但过滤器不想工作 以下是我的一些代码: <!DOCTYPE html> <html lang="en" class="no-js"> <head> <!-- Add jQuery library
在过滤链接和脚本上方,过滤器工作,但花式方框不想工作;在花式方框链接和脚本上方添加相同的链接时,花式方框工作,但过滤器不想工作
以下是我的一些代码:
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<!-- Add jQuery library of fancybox -->
<script type="text/javascript" src="image-library/lib/jquery-1.10.1.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="image-library/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="image-library/source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="image-library/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="image-library/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="image-library/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="image-library/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="image-library/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="image-library/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/*
* Different effects
*/
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});
// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'over'
}
}
});
// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,
openEffect : 'none',
helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});
// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
/*
* Button helper. Disable animations, hide close button, change title type and content
*/
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = '';
}
});
/*
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
/*
* Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
*/
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
arrows : false,
helpers : {
media : {},
buttons : {}
}
});
/*
* Open manually
*/
$("#fancybox-manual-a").click(function() {
$.fancybox.open('1_b.jpg');
});
$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : 'iframe.html',
type : 'iframe',
padding : 5
});
});
$("#fancybox-manual-c").click(function() {
$.fancybox.open([
{
href : '1_b.jpg',
title : 'My title'
}, {
href : '2_b.jpg',
title : '2nd title'
}, {
href : '3_b.jpg'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="filter/filtrify.css">
<script src="filter/highlight.pack.js"></script>
<script src="filter/script.js"></script>
<script src="filter/filtrify.min.js"></script>
<script type="text/javascript">
$(function() {
var ft = $.filtrify("cbp-rfgrid", "placeHolder");
$("a#1").click(function() {
ft.trigger({ categories : ["Photography"] });
});
$("a#2").click(function() {
ft.trigger({ categories : ["Retouching"] });
});
$("a#3").click(function() {
ft.trigger({ categories : ["CGI"] });
});
$("a#4").click(function() {
ft.trigger({ categories : ["Oranges"] });
});
$("div#triggers > a").click(function() {
$(this)
.addClass("selected")
.siblings("a")
.removeClass("selected");
});
$("a#reset strong").click(function() {
ft.reset();
$(this).addClass("selected");
$('#triggers .selected').removeClass("selected");
});
$("li").click(function() {
ft.reset();
$(this).addClass("selected");
$('#triggers .selected').removeClass("selected");
});
});
</script>
</head>
$(文档).ready(函数(){
/*
*简单图像库。使用默认设置
*/
$('.fancybox').fancybox();
/*
*不同效果
*/
//更改标题类型、覆盖关闭速度
$(“.fancybox-effects-a”).fancybox({
助手:{
标题:{
类型:“外部”
},
覆盖:{
加速输出:0
}
}
});
//禁用打开和关闭动画,更改标题类型
$(“.fancybox-effects-b”).fancybox({
openEffect:'无',
closeEffect:'无',
助手:{
标题:{
键入:“结束”
}
}
});
//设置自定义样式,单击后关闭,更改标题类型和覆盖颜色
$(“.fancybox-effects-c”).fancybox({
wrapCSS:“fancybox定制”,
closeClick:true,
openEffect:'无',
助手:{
标题:{
类型:“内部”
},
覆盖:{
css:{
‘背景’:‘rgba(238,0.85)’
}
}
}
});
//删除填充,设置打开和关闭动画,单击后关闭并禁用覆盖
$(“.fancybox-effects-d”).fancybox({
填充:0,
openEffect:'弹性',
开放速度:150,
闭合效应:“弹性”,
接近速度:150,
closeClick:true,
助手:{
覆盖:空
}
});
/*
*按钮助手。禁用动画,隐藏关闭按钮,更改标题类型和内容
*/
$('.fancybox按钮').fancybox({
openEffect:'无',
closeEffect:'无',
效果:“无”,
下一个效果:“无”,
closeBtn:false,
助手:{
标题:{
类型:“内部”
},
按钮:{}
},
后加载:函数(){
this.title='';
}
});
/*
*缩略图帮助程序。禁用动画、隐藏关闭按钮、箭头,并在单击时滑动到下一个库项目
*/
$('.fancybox拇指')。fancybox({
效果:“无”,
下一个效果:“无”,
closeBtn:false,
箭头:错,
下一步:没错,
助手:{
拇指:{
宽度:50,
身高:50
}
}
});
/*
*媒体助手。分组项目、禁用动画、隐藏箭头、启用媒体和按钮助手。
*/
$(“.fancybox媒体”)
.attr('rel','media gallery')
.fancybox({
openEffect:'无',
closeEffect:'无',
效果:“无”,
下一个效果:“无”,
箭头:错,
助手:{
媒体:{},
按钮:{}
}
});
/*
*手动打开
*/
$(“#fancybox-manual-a”)。单击(函数(){
$.fancybox.open('1_b.jpg');
});
$(“#fancybox-manual-b”)。单击(函数(){
$.fancybox.open({
href:'iframe.html',
键入:“iframe”,
填充:5
});
});
$(“#fancybox-manual-c”)。单击(函数(){
$.fancybox.open([
{
href:'1_b.jpg',
标题:“我的标题”
}, {
href:'2_b.jpg',
标题:“第二名”
}, {
href:'3_b.jpg'
}
], {
助手:{
拇指:{
宽度:75,
身高:50
}
}
});
});
});
$(函数(){
var ft=$.filtery(“cbp rfgrid”、“占位符”);
$(“a#1”)。单击(函数(){
ft.trigger({类别:[“摄影”]});
});
$(“a#2”)。单击(函数(){
触发器({类别:[“修饰”]});
});
$(“a#3”)。单击(函数(){
触发器({categories:[“CGI”]});
});
$(“a#4”)。单击(函数(){
ft.trigger({类别:[“橙子”]});
});
$(“div#triggers>a”)。单击(函数(){
$(本)
.addClass(“选定”)
.兄弟姐妹(“a”)
.removeClass(“选定”);
});
$(“重置强”)。单击(函数(){
ft.reset();
$(此).addClass(“选定”);
$('#triggers.selected').removeClass(“selected”);
});
$(“li”)。单击(函数(){
ft.reset();
$(此).addClass(“选定”);
$('#triggers.selected').removeClass(“selected”);
});
});
您也可以参考下面的链接,看到它与花式盒子的问题活着
在您的示例中,首先调用jQuery(1.10.1),然后嵌入Fancybox脚本,然后是执行Fancybox的脚本。 在actions部分之后,您将调用另一个jQuery(1.8.2)。有