动态加载从MySQL数据库中的fancybox Ajax内容数据库中、加载、动态、内容
我有这个code，显示的fancybox链接。它是如何工作的，现在是： 我选择MySQL数据库这是匹配的一类4项。并再次对我的网页上的所有类别。我设置一个rel ='X'匹配类X项。 知道是什么我想要做的是更深入的类别。当完成查看4个项目，从相对='X'组这意味着，从MySQL数据库中选择nextcoming项，以显示而不是显示在其中，这4个链接的页面。条目按ID降序排序。
＆LT;一类=各种fancybox.ajax数据的fancybox-TYPE =AJAX相对=组
HREF =view.php和放大器;？ID =＆LT; PHP的echo $ rw10 ['身份证'];？＆GT;＆GT;＆LT; / A＆GT;
$（文件）。就绪（函数（）{
$（。各个）。的fancybox（{
了maxWidth：800，
了maxHeight：800，
fitToView：假的，
宽度：'70％'，
高度：100％，
autoSize的：假的，
closeClick：假的，
openEffect：'无'，
closeEffect：'无'，
closeBtn：假的，
openEffect：'无'，
closeEffect：'无'，
nextEffect：'无'，
prevEffect：'无'，
preLOAD：真实，
填充：10，
保证金：20，60，20，60] //增加左/右页边距
}）;
解决方案
你可以做的是从你的数据库中获取未来的（相关）的项目，并将其存储在一个的 JSON 的变量，如：
VAR databaseResponse = [{
HREF：路径/ image05.jpg，// 4页上看到这样
类型：形象，
标题：图片＃5，
睿智的：假的
}，{
HREF：路径/ image06.jpg
类型：形象，
标题：图片＃6，
睿智的：假的
}，{
HREF：路径/ image07.jpg
类型：形象，
标题：图片＃7，
睿智的：假的
}]; // 等等
然后推从变数的物品进入 beforeLoad 回调像中集：
VAR做= FALSE; //初始化开关
jQuery的（文件）。就绪（函数（$）{
$（。的fancybox）。的fancybox（{
//循环：假的，//可选
beforeLoad：函数（）{
//这里从数据库中获得下一个项目
//并将其存储在一个JSON变量
// 例如。 databaseResponse
如果（（this.index == this.group.length - 1）及！＆安培;完成）{
对于（VAR I = 0; I＆LT; databaseResponse.length;我++）{
this.group.push（databaseResponse [I]）;
};
做=真; //推的项目只有一次
}
}，
afterClose：函数（）{
做= FALSE; //复位开关
}
}）;
}）; // 准备
的通知，我们正在使用的开关的（即完成变量）的推的项目只有一次（我们可能需要关闭的fancybox虽历经重置的开关的）
的jsfiddle
注意：该项目将被添加（推）只有我们所看到的DOM（在你的情况下，4日）的最后一个项目之后，所以如果你开始向后浏览画廊，你赢了看不到新的项目，但直到第二个循环。
您可能需要设置循环到假虽然
I have this code to display fancybox links. How it works now is: I select 4 entries from MySQL database which are matching a category. And again for all categories on my page. I set a rel='x' for entries matching category 'x'. Idea of what i want to do is 'go deeper into category'. It means when finish viewing 4 items from rel='x' group, select from mysql database nextcoming entry to display but not display at the page where these 4 links are. Entries are ordered by 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
});
解决方案
What you could do is to get the coming (related) items from your database and store them in a json variable like :
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
Then push the items from that variable into the gallery within the beforeLoad callback like :
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
Notice that we are using a switch (the done variable) to push the items only once (we may need to reset the switch after closing fancybox though)
JSFIDDLE
NOTE : the items will be added (pushed) only after we are seeing the last item in the DOM (the 4th in your case) so if you start browsing the gallery backwards, you won't see the new items but until the second loop.
You may want to set loop to false though
