Fancybox 3 ajax load image gallery

Question

Fancy box 3 documentation gives little examples regarding its AJAX functionality. I want to be able to click a button and load a "gallery" consisting of images loaded from an Ajax response.

An example I found (the last one on this page) requires hard-coding the image paths of the gallery in a hidden div; this is fine, but I rather reduce page load time by loading with AJAX.

I found something that looked promising but I'm not sure how to implement Ajax into it. Any ideas?

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

Alex · Accepted Answer

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

Fancybox 3 ajax load image gallery

Answers (2)

Little correction for the latest version of fancybox:

Related Questions