Ja! Du kan bruke ditt eget galleriet ved å spesifisere «data-callback» når du inkluderer Sirvoy Widget. Det ligner veldig på måten du definerer et tilpasset skript for konverteringssporing som du kan se i denne artikkelen. Følgende hendelser er tilgjengelige:

  • gallery_init – kjøres når søkeskjemaet vises. Hvis du vil bruke ditt eget galleri, kan du ganske enkelt returnere false her for å unngå å laste vårt standardgalleri.
  • gallery_open – kjøres når gjestene klikker på et bilde. I likhet med gallery_init bør du returnere false når du får denne hendelsen for å angi at du ikke vil kjøre standardimplementeringen. Da kan du implementere kundelogikken din her. Ytterligere data som er gitt i objektet:
    • gallery_id – ID begivenheten utløses for
    • gallery – Samling med bildeobjekter som ser slik ut:
     [{
      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,
      },
  }, ...]

Nedenfor er et eksempel på hvordan du bruker Fancybox istedenfor standardgalleriet. Du kan imidlertid implementere hva du vil her, for å integrere galleriet med hvordan du viser andre bilder på nettsiden din og dermed få utseendet og følelsen til å harmonere.

Merk: Sørg for å erstatte “data-form-id” med din egen bookingmotor-ID. Sørg også for å sjekke vilkårene og lisensen for Fancybox før du bruker den, slik at den fungerer i ditt tilfelle: 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>