私は一週間以来これにこだわっています！どんな助けでも大歓迎です.! 私が持っているのは、Kendo ListView を使用してサムネイルとして表示したい JSON データです。また、サムネイル画像をクリックすると、fancybox が暗い画面を開いてアイテムを表示できるようにします。これまでに行ったことで、剣道 ListView はサムネイルをうまく表示できますが、サムネイル画像をクリックすると、画像全体にリダイレクトされ、派手なポップアップが開きません。私の推測では、この 2 つのことが干渉しているため、Fancybox はおそらく何かを行うことができません。ページはこちら: http://butterflydiamonds.com/blank.php
データがロードされたら、Tile 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>