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 eenvoudigfalseretourneren om te voorkomen dat u onze standaard galerie-implementatie laadt.gallery_open– start wanneer de gast op een afbeelding klikt. Net als bij de gebeurtenisgallery_init, moet ufalseretourneren 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
[{ 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.
Opmerking: Zorg ervoor dat u “data-form-id” vervangt door uw eigen booking engine-ID. Zorg er ook voor dat u de voorwaarden en licentie voor Fancybox controleert voordat u het gebruikt, zodat het werkt voor uw gebruik: https://fancyapps.com/fancybox/3/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!-- 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(function (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> |