Before you begin this tutorial

By this stage, you should have already published your site and optionally setup your custom domain, if you have not yet completed these steps, please complete them and then continue with this tutorial.

After completing this tutorial

You will have one or more buttons on your website that activate the meta gallery and look similar to this:

Lets get started

Including the Meta Gallery script

The meta gallery script is a chunk of code that allows VDroom to implement the gallery on your page.
This code chunk should only be included once and only on the pages that you want your gallery to appear.

Place this code in the <head> section of your html

<!-- VDroom Meta Gallery Script -->
<script>
    !function (d, r, e, a, m, s) {
        d[a] = d[a] || {};
        d[a][m] = d[a][m] || {};
        (a = r.createElement("script")).defer = !0, a.src = e;
        (s = r.getElementsByTagName("script")[0]).parentNode.insertBefore(a, s);
    }(window, document, "https://gallery.vdroom-travel.com/gallery.js", "vdroom", "gallery")
</script>
<!-- End VDroom Meta Gallery Script -->

Including the Meta Gallery Activators

A meta gallery activator is a small html snippet that our script, (the one from above) will search for and use as a button to open the gallery.

The html snippet has two important attributes:

  • Gallery ID, this will be used in order to load the correct gallery
  • Display directive, used to customise the look of the button

Here is the basic html snippet template

<vd-activator gallery="[Gallery ID]" display="[none|default]"></vd-activator>

Wheres that ID??
You can get your Gallery ID from you project manager page under the marketing section.

What exactly is this display thing you talk of??
The display attribute is a directive that you can use in order to customise the look of your button.
There are two possible directives:
default
When the directive is set to default, this means that we will include a button for you and make your life super simple. For most use cases this is more than good enough.
This is what your button will look like.

none
When the directive is set to none, there will be no visual render of the button and allows you to fully customise what is seen. you can also add additional html elements within the button.

So for example if you have your own custom image that you want to show, you could do something like this: 

<vd-activator gallery="[Gallery ID]" display="[none|default]">
  <img src="/my/awesome/image.png"></img>
</vd-activator>

Or for example you have an html block that you want a click on the entire block to open the gallery you could do something like this:

<vd-activator gallery="[Gallery ID]" display="[none|default]">
  <div>
    <h1>Virtual Reality and 360 Gallery</h1>
  </div>
  <div>
    <img src="some/awesome/image.png"></img>
  </div>
  <div>
    <p>See us like you have never seen us before</p>
  </div>
</vd-activator>
Did this answer your question?