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

Question

我有这段代码可以显示 fancybox 链接。现在它的工作原理是:我从 MySQL 数据库中选择了 4 个匹配类别的条目。再次针对我页面上的所有类别。我为匹配类别“x”的条目设置了 rel='x'。我想做的事情是“深入类别”。意思是当查看完rel='x'组的4个item时，从mysql数据库中选择nextcoming entry来显示，而不是在这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

然后在 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