Ja! Du kan bruge dit galleri ved at specificere “data-callback”, når Sirvoy-widget’en inkluderes. Det er næsten det samme som når du skal definerer et brugerdefineret script til konverteringstracking som det ses i denne artikel. Følgende “events” er i øjeblikket tilgængelige:

  • gallery_init – tændes når søgefunktionen vises. Hvis du vil implementere dit eget galleri, kan du blot bruge return false her for at undgå at indlæse vores standardgalleri.
  • gallery_open – tændes når gæsten klikker på billedet. I lighed med gallery_init-eventet, skal du bruge return false, når du får dette “event” for at indikere, at du undgår at køre vores standard.
    Derefter kan du implementere din kundelogik her. Yderligere data, der er givet i det medfølgende objekt:

    • gallery_id – galleri id’et som “eventet” skal tænde for
    • gallery – Array med billedobjekter, der ser sådan ud: 
       [{
      title: 'Mit Billede',
      type: 'image',
      contentType: 'image/...',
      thumb: {
          url: 'https://...',
          size: 12345,
          height: 123,
          width: 123,
      },
      image: {
          url: 'https://...',
          size: 12345,
          height: 123,
          width: 123,
      },
  }, ...]

Nedenfor er et eksempel på hvordan du bruger Fancybox i stedet for vores standardgalleri. Du kan dog implementere lige hvad du har lyst til ved at integrere galleriet her og også hvordan du viser andre billeder på din hjemmeside hvorved du vil få udseendet til at føle mere harmonisk.

Bemærk: Sørg for at udskifte “data-form-id” med din egen reservationsformulars’ ID. Sørg også for at kontrollere betingelserne og licensen for Fancybox, før du bruger den, så den fungerer til din formål: 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>