Question

我有这段代码来显示fancybox链接。它现在的工作原理是：我从MySQL数据库中选择了与类别匹配的4个条目。并再次为我的页面上的所有类别。我设置了一个rel =＆＃39; x＆＃39;对于匹配类别＆＃39; x＆＃39;的条目。我想做的事情的想法是更深入到类别＆＃39;。这意味着当完成查看来自rel =＆＃39; x＆＃39;组，从mysql数据库的下一个条目中选择要显示但不显示在这4个链接所在的页面。条目按ID DESC排序。

<a  class="various fancybox.ajax" data-fancybox-type="ajax" rel="group" 
    href="view.php?&id=<?php echo $rw10['id']; ?>"></a>

    $(document).ready(function() {
    $(".various").fancybox({
        maxWidth    : 800,
        maxHeight   : 800,
        fitToView   : false,
        width       : '70%',
        height      : '100%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        'closeBtn' : false,
         openEffect  : 'none',
        closeEffect : 'none',
        nextEffect  : 'none',
        prevEffect  : 'none',
        preload: true,
        padding     : 10,
        margin      : [20, 60, 20, 60] // Increase left/right margin
    });

Answer 1

您可以做的是从数据库中获取即将到来的（相关）项目，并将它们存储在 json 变量中，如：

var databaseResponse = [{
    href: "path/image05.jpg", // 4 are visible on page so
    type: "image",
    title: "Image #5",
    isDom: false
}, {
    href: "path/image06.jpg",
    type: "image",
    title: "Image #6",
    isDom: false
}, {
    href: "path/image07.jpg",
    type: "image",
    title: "Image #7",
    isDom: false
}]; // etc

然后push将该变量中的项目放入beforeLoad回调中的图库中，如：

var done = false; // initialize switch
jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        // loop : false, // optional
        beforeLoad: function () {
            // here get next items from database 
            // and store them in a json variable
            // e.g. "databaseResponse"
            if ((this.index == this.group.length - 1) && !done) {
                for (var i = 0; i < databaseResponse.length; i++) {
                    this.group.push(databaseResponse[i]);
                };
                done = true; // push items only once
            }
        },
        afterClose: function () {
            done = false; // reset switch
        }
    });
}); // ready

注意我们只使用开关（done变量）推送项目一次（我们可能需要）关闭fancybox后重置开关）

<强> JSFIDDLE

注意：只有在我们看到DOM中的最后一项（在您的情况下为第4项）之后才会添加（推送）项目，因此如果您开始向后浏览图库，则您赢了看到新项目，但直到第二个循环。

您可能希望将loop设置为false，但

从MySQL数据库动态加载fancybox上的ajax内容

1 个答案: