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

我有这个代码来显示fancybox链接。 它现在的工作原理是：我从MySQL数据库中选择了4个匹配类别的条目。 并再次为我的页面上的所有类别。 我为匹配类别’x’的条目设置了rel =’x’。 我想做的是“深入分类”。 这意味着当从rel =’x’组中查看4个项目时，从mysql数据库下一个条目中选择要显示但不显示在这4个链接所在的页面。 条目按ID DESC排序。

<a class="various fancybox.ajax" data-fancybox-type="ajax" rel="group" href="https://stackoverflow.com/questions/22824468/dynamically-load-ajax-content-on-fancybox-from-mysql-database/view.php?&id="> $(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 // eg "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