はい、ご利用頂けます！Sirvoy ウィジェットに “data-callback” を指定することによって、ご自分のギャラリーを使用することが出来ます。この設定は、この記事にあるコンバージョントラッキングのカスタムスクリプトの設定に似ています。以下のイベントが現在使用可能です:

  • gallery_init – 検索フォームが表示されている時にイベントを起動します。ご自分のギャラリーを実装したい場合には、当社のデフォルトのギャラリーが使用されないよう return を false にします。
  • gallery_open  – ゲストがイメージをクリックするとイベントが起動します。gallery_init の場合と同様に、このイベントで当社のデフォルトの実装が作動するのを拒否するために return を false にします。その後、ここにあなたの Customer Logic を実装します。関係する追加のデーター:
    • gallery_id – イベントを起動するフォトギャラリーID
    • gallery – 以下のようなイメージの対象との配列 (Array):
     [{
      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,
      },
  }, ...]

以下は当社のデフォルトのフォトギャラリーの代わりに、どの様に Fancybox を使用するかの一例です。ここに何でもお好みで実装することが出来ます。フォトギャラリーを貴施設のウェブサイトのその他のイメージに合わせることにより、全体のデザインが調和するように出来ます。

ご注意下さい: “data-form-id” に必ずご自分の予約フォームIDを入力して下さい。Fancybox を利用するには、Fancybox の利用規約とライセンスを確認してからご使用下さい。https://fancyapps.com/fancybox/3/
.

<html>
    <head>
        <!-- load dependencies -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css"/>
        <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>
    </head>
    <body>

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

    </body>
</html>