Yes! You can use your gallery by specifying “data-callback” when including the Sirvoy widget. It is very similar to how you define a custom script for conversion tracking as seen in this article. The following events are currently available:

  • gallery_init – fires when displaying the search form. If you want to implement your own gallery, you can simply return false here to avoid loading our default gallery implementation.
  • gallery_open – fires when guest clicks on image. Similar to the gallery_init event, you should return false when getting this event to indicate that you will avoid running our default implementation. Then you can implement your customer logic here. Additional data that is given in the supplied object:
    • gallery_id – the gallery id the event triggers for
    • gallery – Array with image objects that looks like this:
     [{
      title: 'My image',
      type: 'image',
      contentType: 'image/...',
      thumb: {
          url: 'https://...',
          size: 12345,
          height: 123,
          width: 123,
      },
      image: {
          url: 'https://...',
          size: 12345,
          height: 123,
          width: 123,
      },
  }, ...]

Below is an example on how to use Fancybox instead of our default gallery. However, you can implement anything you like here, integrating the gallery into how you display other images on your website, thus making the look and feel harmonious.

Note: Make sure to replace “data-form-id” with your own booking engine ID. Also make sure to check the terms and license for Fancybox before using it, so that it works for your use-case: https://fancyapps.com/fancybox/3/


    
        
        <!-- load dependencies -->
        
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

    <!-- custom event handler implementation -->
        <script type="application/javascript">
            function customGalleryEventHandler(data) {
                // this triggers on a page where the gallery can be displayed 
                if (data.event === "gallery_init") {
                    // return false to prevent loading default gallery assets
                    return false;
                }
        
                // this will trigger when a user clicks on the thumbnail to display the gallery
                if (data.event === "gallery_open") {
                    let objects = [];
                    data.gallery.forEach((object) => {
                        objects.push({ src: object.image.url, opts: { caption: object.title, thumb: object.thumb.url } });
                    });
                    $.fancybox.open(objects, { loop: false });
        
                    // return false to prevent loading displaying default gallery 
                    return false;
                }
            }
        </script>