Fancybox 3 ajax加载图片库

时间:2017-10-23 01:11:16

标签: jquery ajax fancybox-3

Fancy box 3 documentation提供了关于其AJAX功能的小例子。我希望能够点击一个按钮并加载一个"画廊"由ajax响应加载的图像组成。

我找到的一个例子(this页面上的最后一个)需要在隐藏的div中对图库的图像路径进行硬编码;这很好,但我宁愿通过加载AJAX来减少页面加载时间。

我找到了promising的内容,但我不确定如何将ajax实现到其中。有什么想法吗?

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

2 个答案:

答案 0 :(得分:0)

ajax画廊有两个步骤:

  1. 链接到ajax画廊。
  2. 使用其他网址构建您的图库。
  3. 链接到ajax画廊:

    如果再次查看文档(ajax部分):

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

    它声明您可以轻松链接到ajax库(不需要javascript) 使用data-type="ajax"data-src="my_page.com/path/to/ajax/"作为您的ajax内容

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

    现在,您可以创建指向图库的链接,然后继续在另一个网址中设置ajax图库。

    使用其他网址构建您的图库:

    在您打算保留所有图库图片的单独网址(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中展示他的画廊。

答案 1 :(得分:0)

原来这很简单:

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