原来它超级简单：
$(document).ready(function () {
$("#test").on('click', function () {
$.ajax({
type: 'POST',
url: '/neou_cms/test/ajax_resp',
dataType: 'json',
success: function (data) {
$.fancybox.open(data);
}
});
});
});
AJAX 响应在哪里：
[{"src":"\/images\/uploads\/projects\/207002523\/m_207002523_1.jpg"},
{"src":"\/images\/uploads\/projects\/207002523\/m_207002523_2.jpg"},
{"src":"\/images\/uploads\/projects\/207002523\/m_207002523_3.jpg"},
{"src":"\/images\/uploads\/projects\/207002523\/m_207002523_4.jpg"}]
只要遵循以下语法，您甚至可以添加字幕和可选的拇指：
{
src : '1_b.jpg',
opts : {
caption : 'First caption'
}
},
Codeigniter 代码：
$this->load->model('backend/images_model');
$query = $this->db->get_where('projects', array('id' => '207002523'));
$images = $this->images_model->get_images($query->row()->images);
$output = array();
foreach ($images as $image) {
$output[] = array('src' => $image['main']);
}
echo json_encode($output);
exit;
如果您已经在 href 中有一张图片，并且希望在 fancybox 打开时加载更多图片，您可以这样做：
$(document).ready(function () {
$("[data-fancybox]").fancybox({
loop: false,
onInit: function (instance) {
$.ajax({
type: 'POST',
url: '/neou_cms/test/ajax_resp',
dataType: 'json',
success: function (data) {
$.each(data, function (index, src) {
instance.createGroup({
type: 'image',
src: src
});
});
}
});
}
});
});
对最新版fancybox的小修正：
$(document).ready(function () {
$("[data-fancybox]").fancybox({
loop: false,
onInit: function (instance) {
let id_album = $("[data-fancybox]").attr('id');
$.ajax({
type: 'POST',
url: './neou_cms/test/ajax_resp',
dataType: 'json',
success: function (data) {
$.each(data, function (item) {
instance.addContent({
'type': 'image',
'src': item.src
});
});
}
});
}
});
});