Kyllä! Voit käyttää galleriaasi määrittelemällä ”data-callback” sisällyttäessäsi Sirvoy pienoissovelluksen. Tämä toimii hyvin samanlaisesti kuin mukautetun komentosarjan määritteleminen tulosseurannalle, kuten tässä artikkelissa esitetään. Seuraavat tapahtumat ovat tällä hetkellä käytettävissä:

  • gallery_init– käynnistyy, kun hakulomake näytetään. Jos haluat ottaa käyttöön oman gallerian, voit yksinkertaisesti palauttaa arvon false täällä välttääksesi oletusgalleriamme lataamisen.
  • gallery_open – käynnistyy, kun vieras napsauttaa kuvaa. Samoin kuin gallery_init -tapahtumassa, sinun tulisi palauttaa arvo false saadaksesi tämän tapahtuman osoittamaan, että haluat välttää oletustoteutuksemme suorittamisen. Sitten voit toteuttaa asiakaslogiikkasi täällä. Annetussa objektissa annettavat lisätiedot:
    • galleria_id – galleria-tunnus, joka käynnistää tapahtuman
    • galleria – Taulukko kuvaobjekteilla, jotka näyttävät tältä:
 [{
      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,
      },
  }, ...]

Alla on esimerkki siitä, kuinka Fancyboxia voidaan käyttää oletusgalleriamme sijasta. Tässä voit kuitenkin ottaa käyttöön minkä tahansa haluamasi gallerian, integroimalla sen siihen, miten näytät muita kuvia verkkosivustollasi, mikä tekee sen ulkoasusta harmonisemman.

Huomaa: Muista korvata ”data-form-id” omalla varausmoottoritunnuksellasi. Varmista myös, että tarkistat Fancyboxin käyttöehdot ja lisenssin ennen sen käyttöä, varmistaaksesi että se sopii käyttötarkoitukseesi:  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>