Ja! Du kannst eine Galerie verwenden, indem du im Sirvoy Widget das „data-callback“ spezifizierst. Es funktioniert ähnlich wie ein Custom Script für Conversion Tracking (siehe diesen Artikel). Die folgenden Events sind momentan verfügbar:

  • gallery_init – wird aktiv, wenn das Suchformular angezeigt wird. Wenn du deine eigene Galerie anzeigen lassen willst, kannst du hier einfach false einstellen. Damit wird unsere Standardgalerie nicht angezeigt.
  • gallery_open – wird aktiv, wenn der Gast auf das Bild klickt. Ähnlich wie beim gallery_init-Event, kannst du hier false einstellen. Damit verhinderst du, dass die Standardimplementierung läuft. Danach kannst du deine eigene Customer Logic implementieren. Zusätzliche Daten, die diesbezüglich interessant sind:
    • gallery_id – die ID der Galerie, die bei diesem Event aktiviert werden soll.
    • gallery – Array mit Bildern, das wie folgt aussieht:
     [{
      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,
      },
  }, ...]

Unten ist ein Beispiel wie man Fancybox anstelle unserer Standardgalerie verwenden kann. Du kannst hier jedoch auch andere Galerien implementieren, damit sie zu den Bildern auf deiner Webseite passen.

Beachte: Bitte ersetze “data-form-id” mit der ID deines eigenen Buchungsformulars. Vergewissere dich außerdem, dass du die Nutzungsbedingungen von Fancybox akzeptierst, bevor du es verwendest, damit es in deinem Fall funktioniert: 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>
    

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