0

一个星期以来我一直坚持这个！任何帮助将不胜感激。！我所拥有的是一些 JSON 数据，现在我想使用 Kendo ListView 将其显示为缩略图。另外，当我们单击缩略图时，我希望fancybox 打开暗屏并允许我查看项目。到目前为止，kendo ListView 可以很好地显示缩略图，但是当我单击缩略图时，它会将我重定向到整个图像并且不会打开fancybox 弹出窗口。我的猜测是这两件事相互干扰，因为 Fancybox 可能无法做任何事情。该页面在这里：http ://butterflydiamonds.com/blank.php

加载数据后，只需单击“平铺视图”即可查看我在说什么。提前致谢！

编辑：那些不想点击链接的人的代码：

<!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>
4

1 回答 1

1

有问题。这是冲突的 jQuery 调用。使用 jQuery.fancybox() 而不是 $.fancybox() 解决。

于 2014-07-02T06:22:50.253 回答