Javascript 将Kendo ListView与Fancybox问题合并
一个星期以来我一直在做这个！任何帮助都将不胜感激。！ 我有一些JSON数据，现在我想用Kendo ListView显示为缩略图。此外，当我们点击缩略图时，我希望fancybox打开黑色屏幕，让我查看项目。 根据我目前所做的，剑道列表视图可以很好地显示缩略图，但是当我点击缩略图图像时，它会将我重定向到整个图像，并且不会打开fancybox弹出窗口。 我的猜测是，这两件事是相互关联的，因为Fancybox可能无法完成这些事情。 页面如下： 加载数据后，只需单击“平铺视图”即可查看我所说的内容。 提前谢谢 编辑：不想单击链接的用户的代码：Javascript 将Kendo ListView与Fancybox问题合并,javascript,jquery,html,fancybox-2,kendo-listview,Javascript,Jquery,Html,Fancybox 2,Kendo Listview,一个星期以来我一直在做这个！任何帮助都将不胜感激。！ 我有一些JSON数据，现在我想用Kendo ListView显示为缩略图。此外，当我们点击缩略图时，我希望fancybox打开黑色屏幕，让我查看项目。 根据我目前所做的，剑道列表视图可以很好地显示缩略图，但是当我点击缩略图图像时，它会将我重定向到整个图像，并且不会打开fancybox弹出窗口。 我的猜测是，这两件事是相互关联的，因为Fancybox可能无法完成这些事情。 页面如下： 加载数据后，只需单击“平铺视图”即可查看我所说的内容。 提前
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Diamond Database</title>
<link href="style/css/custom.css" rel="stylesheet" type="text/css">
<!-- Common Kendo UI Web CSS -->
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<!-- Default Kendo UI Web theme CSS -->
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<!-- jQuery JavaScript -->
<script src="js/jquery.min.js"></script>
<!-- Kendo UI Web combined JavaScript -->
<script src="js/kendo.web.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<link rel="stylesheet" type="text/css" href="style/css/media-queries.css" media="all" />
<link rel="stylesheet" type="text/css" href="style/type/qlassik.css" media="all" />
<script type="text/javascript" src="style/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="style/js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="style/js/selectnav.js"></script>
<script type="text/javascript" src="style/js/jquery.fitvids.js"></script>
<script type="text/javascript" src="style/js/jquery.slickforms.js"></script>
<script type="text/javascript" src="js/forms.js"></script>
<script type="text/javascript" src="js/jsonconvert.js"></script>
<script type="text/javascript" src="style/js/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" type="text/css" href="style/js/fancybox/jquery.fancybox.css" media="all" />
<link rel="stylesheet" type="text/css" href="style/js/fancybox/helpers/jquery.fancybox-buttons.css?v=1.0.2" />
<script type="text/javascript" src="style/js/fancybox/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<link rel="stylesheet" type="text/css" href="style/js/fancybox/helpers/jquery.fancybox-thumbs.css?v=1.0.2" />
<script type="text/javascript" src="style/js/fancybox/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script>
<script type="text/javascript" src="style/js/fancybox/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<link href="style/css/classic-081711.css" rel="stylesheet" type="text/css">
<script>
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
</head>
<body id="page">
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Main -->
<div id="main">
<div class="container box">
<div id="container"></div>
<p id="new"></p>
<p id="test"></p>
<!-- Begin Toggle -->
<h4 class="title">Search Options</h4>
<div>
<div style="float: right">
<div style="float: left"><ul class="filter">
<li><a class="active button dark" id="gridfilter" onclick="dogridstuff()" data-filter="*">Grid View</a></li>
<li><a class="dark button" id="tilefilter" onclick="dotilestuff()" data-filter=".bw">Tile View</a></li>
</ul></div>
</div>
</div>
<!-- End Toggle -->
<div id="database">
<div id="items" style="display:none">
<div id="listView" style="margin-left: 50px"></div>
<div id="pager" class="k-pager-wrap"> </div>
</div>
<div id="grid"></div>
</div>
<p><b>Note:The column pair id represents respective pairs and prices may vary as per selection, if any.</b></p>
<br>
<script type="text/x-kendo-template" id="template2">
<div class="item">
<div class="thumb">
<a href= "style/images/art/blue2.png" class="hover fancybox-media" title= #= PID # ><span class="overlay zoom"></span><img src= #= PHOTO # style="display: inline" onerror="this.src='style/images/imgnotavailable.jpg'" width='280px'></a>
</div>
<div class="details">
<h4 class="entry-title"> #= PID # </a></h4>
</div>
</div>
</script>
<script>
var data=[];
var dataforgrid=[];
var data2=[];
var i=1;
var prev="";
var text="";
var source;
$(document).ready(function(){
$.ajax({
url: 'https://dl.dropboxusercontent.com/u/2565723/thedata.js?callback=callback&_=1402638666911',
dataType: 'jsonp',
jsonp: 'callback'
});
})
function initSource()
{
for(var i=0;i<dataforgrid.length;++i)
{
dataforgrid[i].CTS=dataforgrid[i].CTS.toFixed(2);
}
source=new kendo.data.DataSource({
data:dataforgrid,
// {transport:{
// read: {
// url:"https://dl.dropboxusercontent.com/u/2565723/thedata.js",
// dataType:"jsonp",
// jsonpCallback: 'callback'
// }}
schema: {
model: {
fields: {
PID: { type: "string",editable: false},
SELECT: {type:"boolean",editable: false},
SPRICE: { type: "number",editable: false },
SHAPE: { type: "string",editable: false },
PCS: { type: "number",editable: false },
COLID: {editable: false},
CTS: {editable: false},
PHOTO: {editable: false},
DESCRIPTION: {editable: false},
CLARITY: {editable: false},
POLISH: {editable: false},
SYMMETRY: {editable: false},
L: {editable: false},
W: {editable: false},
TD: {editable: false},
D: {editable: false},
FLU: {editable: false},
}
}
},
autoSync: true,
sort:
[{field:"COLID",dir:"asc"},
{field:"DESCRIPTION",dir:"asc"},
{field:"CTS",dir:"asc"}
],
pageSize: 20
});
initGrid();
}
function dogridstuff()
{
$("#tilefilter").removeClass("active");
$("#gridfilter").addClass("active");
$("#grid").show();
document.getElementById("items").style.display='none';
}
function dotilestuff()
{
$("#tilefilter").addClass("active");
$("#gridfilter").removeClass("active");
prepareDataForTile();
initTile();
$("#grid").hide();
document.getElementById("items").style.display='block';
}
function initTile()
{
updateSource();
$("#pager").kendoPager({
dataSource: source,
pageSizes: [9,18,27,54],
buttonCount: 5
});
$("#listView").kendoListView({
dataSource: source,
selectable: false,
template: kendo.template($("#template2").html())
});
}
function prepareDataForTile()
{
for(var i=0;i<dataforgrid.length;++i)
{
if(dataforgrid[i].PHOTO=="")
dataforgrid.splice(i--,1);
}
}
function callback(datafromfile)
{
dataforgrid=datafromfile;
data=datafromfile;
for(var i=0;i<dataforgrid.length;++i)
{
dataforgrid[i].SELECT=false;
data[i].SELECT=false;
}
data[0].SELECT=true;
initSource();
}
function updateSource()
{
source=new kendo.data.DataSource({
data:dataforgrid,
schema: {
model: {
fields: {
PID: { type: "string",editable: false},
SELECT: {type: "boolean",editable: true},
SPRICE: { type: "number",editable: false },
SHAPE: { type: "string",editable: false },
PCS: { type: "number",editable: false },
COLID: {editable: false},
CTS: {editable: false},
PHOTO: {editable: false},
DESCRIPTION: {editable: false},
CLARITY: {editable: false},
POLISH: {editable: false},
SYMMETRY: {editable: false},
L: {editable: false},
W: {editable: false},
TD: {editable: false},
D: {editable: false},
FLU: {editable: false},
}
}
},
autoSync: true,
sort:
[{field:"COLID",dir:"asc"},
{field:"DESCRIPTION",dir:"asc"},
{field:"CTS",dir:"asc"}
],
pageSize: 20
});
//functions for Kendogrid, filtering search, etc. not relevant to question
</script>
</div>
</div>
<!-- End Main -->
</div>
<!-- End Wrapper -->
<script type="text/javascript" src="style/js/scripts.js"></script>
</body>
</html>
钻石数据库
$.noConflict（）；
//使用其他库的$的代码可以在这里找到。
搜索选项
-
#=PID#
var数据=[]；
var dataforgrid=[]；
VarData2=[]；
var i=1；
var prev=“”；
var text=“”；
var源；
$（文档）.ready（函数（）{
$.ajax({
网址：'https://dl.dropboxusercontent.com/u/2565723/thedata.js?callback=callback&_=1402638666911',
数据类型：“jsonp”，
jsonp:“回调”
});
})
函数initSource（）
{
对于（var i=0；i
出现问题。是jQuery调用冲突。使用jQuery.fancybox（）而不是$.fancybox（）解决了此问题。不要要求人们单击未知链接，而是在问题中包含相关的（html/jQuery）代码如果这是您的确切代码，则您缺少一个结束括号}所以我猜这会触发一个js错误，阻止fancybox工作。我建议您使用jslint工具来调试代码