0
일주일이 지났습니다. 어떤 도움이라도 대단히 감사하겠습니다. 내가 가지고있는 JSON 데이터는 Kendo ListView를 사용하여 미리보기 이미지로 표시하려고합니다. 또한 미리보기 이미지를 클릭하면 fancybox에서 어두운 화면을 열어 항목을 볼 수있게합니다. kendo ListView는 축소판 이미지를 잘 보여 주지만 축소판 이미지를 클릭하면 전체 이미지로 리디렉션되고 fancybox 팝업이 열리지 않습니다. 내 생각 엔 Fancybox가 아마 할 수없는 것들이 있기 때문에 두 가지가 더 잘 어울리는 것 같습니다. 페이지가 여기에 있습니다 : http://butterflydiamonds.com/blank.phpFendbox 문제가있는 Kendo ListView 병합
데이터가로드되면 그냥 내가 말하고자하는 것을보기 위해 타일보기를 클릭하십시오. 미리 감사드립니다.
편집 : 링크를 클릭하지 않는 사람들의 코드 :
<!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>
사람들에게 알려지지 않은 링크를 클릭하도록 요청하지 말고 질문에 관련 (html/jQuery) 코드를 포함 시키십시오. – JFK
정확한 코드라면, 닫는 괄호가 없습니다. fancybox 작동을 방해하는 js 오류를 유발합니다. jslint 도구를 사용하여 코드를 디버깅하는 것이 좋습니다. – JFK