我已经坚持了一周了!任何帮助将不胜感激。! 我拥有一些 JSON 数据，现在我想使用 Kendo ListView 将其显示为缩略图。另外，当我们单击缩略图时，我希望 fancybox 打开黑屏并允许我查看项目。 根据我到目前为止所做的工作，kendo ListView 设法很好地显示缩略图，但是当我单击缩略图时，它会将我重定向到整个图像，并且不会打开 fancybox 弹出窗口。 我的猜测是这两件事互相干扰，因此 Fancybox 可能无法执行某些操作。 页面在这里:http://butterflydiamonds.com/blank.php
数据加载后，只需单击“平铺 View ”即可查看我在说什么。 提前致谢!
编辑:为那些不想点击链接的人提供的代码:
<!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>
最佳答案
遇到问题了。这是 jQuery 调用冲突。使用 jQuery.fancybox() 而不是 $.fancybox() 解决。
关于javascript - 合并 Kendo ListView 与 Fancybox 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24504786/