1

Fancy box 3文档提供了一些关于其 AJAX 功能的示例。我希望能够单击一个按钮并加载一个“图库”，其中包含从 ajax 响应加载的图像。

我发现的一个例子（本页的最后一个）需要将画廊的图像路径硬编码在一个隐藏的 div 中；这很好，但我宁愿通过使用 AJAX 加载来减少页面加载时间。

我发现了一些看起来很有希望的东西，但我不确定如何在其中实现 ajax。有任何想法吗？

$.fancybox.open([
    {
        src  : '1_b.jpg',
        opts : {
            caption : 'First caption'
        }
    },
    {
        src  : '2_b.jpg',
        opts : {
            caption : 'Second caption'
        }
    }
], {
    loop : false
});
4

2 回答 2

4

Turns out it was super simple:

$(document).ready(function () {
    $("#test").on('click', function () {
        $.ajax({
            type: 'POST',
            url: '/neou_cms/test/ajax_resp',
            dataType: 'json',
            success: function (data) {
                $.fancybox.open(data);
            }
        });
    });
});

where AJAX response is:

[{"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"}]

You can even add in captions and optional thumbs as long as you follow this syntax:

    {
        src  : '1_b.jpg',
        opts : {
            caption : 'First caption'
        }
    },

Codeigniter code:

$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;

If you already have one image in the href and and want to load more onto it when fancybox opens, you can do:

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

Little correction for the latest version of 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
            });
          });
        }
      });
    }
  });
});
于 2017-10-23T16:19:35.877 回答
0

ajax画廊有两个步骤：

  1. 链接到 ajax 库。
  2. 在不同的网址中构建您的画廊。

链接到 ajax 库：

如果您再次查看文档（ajax 部分）：

http://fancyapps.com/fancybox/3/docs/#ajax

data-type="ajax"它指出，您可以使用和data-src="my_page.com/path/to/ajax/"为您的 ajax 内容轻松链接到 ajax 库（不需要 javascript）

<a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" href="javascript:;">
    AJAX content
</a>

创建画廊链接后，现在您可以继续在另一个 url 中设置 ajax 画廊。

在不同的 url 中构建您的画廊：

在您打算保留所有画廊图像的单独 url ( my_page.com/path/to/ajax/) 中，您只需像普通的 fancybox 画廊一样设置它。

例子：

<div>
    <a data-fancybox="ajax-gallery-1" href="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_b.jpg" title="Codirosso spazzacamino (Massimo Greco _Foligno)"><img width="160" height="106" src="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_m.jpg" alt="" /></a>
    <a data-fancybox="ajax-gallery-1" href="http://farm6.staticflickr.com/5612/15344856989_449794889d_b.jpg" title="Morning Twilight (Jose Hamra Images)"><img width="160" height="106" src="http://farm6.staticflickr.com/5612/15344856989_449794889d_m.jpg" alt="" /></a>
    <a data-fancybox="ajax-gallery-1" href="http://farm8.staticflickr.com/7289/16207238089_0124105172_b.jpg" title=" (Eric Goncalves (cathing up again!))"><img width="160" height="106" src="http://farm8.staticflickr.com/7289/16207238089_0124105172_m.jpg" alt="" /></a>
    <a data-fancybox="ajax-gallery-1" href="http://farm9.staticflickr.com/8568/16388772452_f4d77a92c7_b.jpg" title="Arctic Paradise (Tom Draxler)"><img width="160" height="106" src="http://farm9.staticflickr.com/8568/16388772452_f4d77a92c7_m.jpg" alt="" /></a>
    <a data-fancybox="ajax-gallery-1" href="http://farm8.staticflickr.com/7308/15783866983_27160395b9_b.jpg" title="Rodeo Dusk (_JonathanMitchellPhotography_)"><img width="160" height="106" src="http://farm8.staticflickr.com/7308/15783866983_27160395b9_m.jpg" alt="" /></a>
    <a data-fancybox="ajax-gallery-1" href="http://farm3.staticflickr.com/2880/10346743894_0cfda8ff7a_b.jpg" title="Les papillons ont du chagrin (JMS')"><img width="160" height="106" src="http://farm3.staticflickr.com/2880/10346743894_0cfda8ff7a_m.jpg" alt="" /></a>
</div>

FancyBox3 网站上也有一个 ajax 请求示例，如果您访问http://fancyapps.com/fancybox/3/，滚动到显示Ajax 请求的部分，您可以看到开发人员如何设置他的画廊以及如何他在不同的网址http://fancyapps.com/fancybox/3/ajax.php?v=1508722146中显示他的画廊。

于 2017-10-23T01:49:37.387 回答