且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

动态加载从MySQL数据库中的fancybox Ajax内容

更新时间:2023-12-05 10:01:46

你可以做的是从你的数据库中获取未来的(相关)的项目,并将其存储在一个的 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< 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