У меня есть этот код для отображения ссылок fancybox. Как это работает сейчас: я выбираю 4 записи из базы данных MySQL, которые соответствуют категории. И снова для всех категорий на моей странице. Я установил rel = 'x' для записей, соответствующих категории 'x'. Идея того, что я хочу сделать, – «углубиться в категорию». Это означает, что при завершении просмотра 4 элементов из группы rel = 'x' выберите из следующей базы данных базы данных mysql, чтобы отобразить, но не отобразить на странице, где находятся эти 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 }); Что вы можете сделать, так это получить ближайшие (связанные) элементы из своей базы данных и сохранить их в переменной 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 (четвертый в вашем случае), поэтому, если вы начнете просматривать галерею назад, вы не увидите новые элементы, но до второго цикла ,
Возможно, вы захотите установить loop на false хотя