Oui, vous pouvez utiliser votre galerie en spécifiant « data-callback » lorsque vous incluez le widget Sirvoy. C’est similaire à la façon dont vous définissez un script personnalisé pour le suivi des conversions tel que vu dans cet article. Les événements suivants sont actuellement disponibles :

• gallery_init – se déclenche lors de l’affichage du moteur de recherche. Si vous voulez implanter votre propre galerie, vous pouvez simplement retourner false ici pour éviter de charger notre implémentation par défaut.
• gallery_open – se déclenche lorsque l’invité clique sur l’image. Comme pour l’événement gallery_init, vous devriez retourner false lorsque vous obtenez cet événement pour indiquer que vous éviterez d’exécuter notre implémentation par défaut. Ensuite, vous pouvez implémenter votre logique client ici. Données supplémentaires fournies dans l’objet fourni :
  • gallery_id – l’identifiant de la galerie que l’événement déclenche pour
  •  gallery – Tableau (Array) avec des objets image qui ressemblent à ceci :

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

Vous trouverez ci-dessous un exemple d’utilisation de Fancybox au lieu de notre galerie par défaut. Vous pouvez insérer ici vos textes et photos afin de créer une mise en page harmonieuse sur votre site Web.

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