¿Puedo usar una galería personalizada para el motor de reservas de mi sitio web?

Sí, puedes usar tu galería especificando «data-callback» cuando incluyas el widget de Sirvoy. Es muy similar a cómo se define un script personalizado para el seguimiento de conversiones, como se ve en este artículo. Los siguientes eventos están actualmente disponibles:

• gallery_init – se activa cuando se muestra el formulario de búsqueda. Si deseas implementar tu propia galería, puedes simplemente devolver false aquí para evitar cargar nuestra implementación de galería predeterminada.
• gallery_open – se activa cuando el huésped hace clic en la imagen. De forma similar al evento gallery_init, debes devolver false al obtener este evento para indicar que evitarás ejecutar nuestra implementación predeterminada. En este caso, puedes implementar tu lógica de cliente. Datos adicionales que se dan en el objeto suministrado:
  • gallery_id– la ID para la que se active el evento.
  • gallery – matriz con objetos de imagen que se parecen a esto:

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

A continuación se muestra un ejemplo de cómo usar Fancybox en lugar de nuestra galería predeterminada. Sin embargo, puedes implementar lo que quieras aquí, integrando la galería en la manera en la que se muestran otras imágenes en tu sitio web, lo que hace que el aspecto y la sensación sean armoniosos.

    
        <!-- 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>
    

        <!-- here is the booking engine form, "customGalleryEventHandler" is the custom event handler you implemented above -->
        <script data-callback="customGalleryEventHandler" async async data-form-id="YOUR-FORM-ID-HERE" src="https://secured.sirvoy.com/widget/sirvoy.js"></script>