Kan ik een aangepaste galerij gebruiken voor de boekingsmodule van mijn website?

Ja! U kunt uw galerij gebruiken door “data-callback” op te geven wanneer u de Sirvoy-widget opneemt. Het lijkt erg op hoe u een aangepast script voor het bijhouden van conversies definieert, zoals in dit artikel. De volgende evenementen zijn momenteel beschikbaar:

• gallery_init – wordt geactiveerd wanneer het zoekformulier wordt weergegeven. Als u uw eigen galerij wilt implementeren, kunt u hier eenvoudig falseretourneren om te voorkomen dat u onze standaard galerie-implementatie laadt.
• gallery_open – start wanneer de gast op een afbeelding klikt. Net als bij de gebeurtenis gallery_init, moet u false retourneren wanneer u deze gebeurtenis krijgt, om aan te geven dat u onze standaardimplementatie niet wilt uitvoeren. Dan kunt u hier uw klantlogica implementeren. Extra gegevens die in het meegeleverde object staan:
  • gallery_id – de galerij-id waarvoor de gebeurtenis triggert
  • gallery – Array met afbeeldingsobjecten die er als volgt uitziet:

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

Hieronder ziet u een voorbeeld van hoe u Fancybox kunt gebruiken in plaats van onze standaardgalerij. U kunt hier echter alles implementeren op de manier waarop u wilt, zodat de galerij geintegreerd wordt op de manier waarom andere afbeeldingen op uw site worden weergegeven zodat het uiterlijk van uw website een harmonieus geheel wordt.

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