Ja! Ni kan använda ert galleri genom att ange ”data-callback” när ni inkluderar Sirvoy-widgeten. Det liknar mycket hur ni definierar ett anpassat skript för konverteringsspårning som visas i den här artikeln. Följande händelser är för närvarande tillgänglia:

  • gallery_init – körs när sökformuläret visas. Om ni vill implementera ert eget galleri kan ni helt enkelt returnera false här för att undvika att ladda vår standardimplementering av galleriet.
  • gallery_open – körs när gästen klickar på bilden. Precis som med gallery_init bör ni returnera false när ni får den här händelsen att indikera att ni kommer att undvika att köra vår standardimplementering. Sedan kan ni implementera er kundlogik här. Ytterligare data som ges i det medföljande objektet är:
    • gallery_id – galleri-id som händelsen körs för
    • gallery – Uppställning för bildobjekt som ser ut så här:
     [{
      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,
      },
  }, ...]

Nedan följer ett exempel på hur ni använder Fancybox istället för vårt standardgalleri. Men ni kan implementera vad som helst här genom att integrera galleriet i hur ni visar andra bilder på er webbplats och därmed göra så att utseendet och känslan harmonierar.

OBS! Se till att ersätta “data-form-id” med id:t för ert bokningsformulär. Se också till att kontrollera villkoren och licensen för Fancybox innan ni använder den, så att den fungerar för er: 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>