Dynamically load ajax content on fancybox from MySQL database

问题

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
    });

回答1:

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

来源：https://stackoverflow.com/questions/22824468/dynamically-load-ajax-content-on-fancybox-from-mysql-database

标签

php

jquery

mysql

ajax

fancybox