Advanced configuration

Customize user experience on your website

Gallery plugin gives you the opportunity to customize your website user experience with some extra configuration.

Desktop experience

The default behavior is that a preview plays when the user hovers over the video thumbnail and will keep looping until the cursor leaves the thumbnail. This behavior can be modified in many ways according your needs.

Redirect countdown

One of the most valued features of the Gallery library is the ability to redirect (with a 3, 2, 1 countdown) to your video content when a user has seen one loop of the preview.

To add this behavior on your website just add a data-redirect attribute to the Gallery script tag:

<script type="text/javascript" src="//static.vilynx.com/gallery/vpg.{{galleryVersion}}.min.js"
        data-publickey="your_public_key"
        data-redirect="true"></script>

If you only want the redirect countdown on some elements you can use the single item configuration and add the vilynx_redirect class to the preview container.

<div class="vilynx_redirect" data-vilynx-id="your_video_ID">
    <img src="img/bg01.jpg">
</div>

If you want more customization on the redirect behavior check Redirect options section.

Autoplaying previews

Another possible experience is to have the previews play automatically when they are in the viewport.

To add this behavior on your website you only need to add a data-autoplay attribute to the Gallery script tag:

<script type="text/javascript" src="//static.vilynx.com/gallery/vpg.{{galleryVersion}}.min.js"
        data-publickey="your_public_key"
        data-autoplay="true"></script>

If you want the autoplay preview on specific elements you can use the single item configuration and the vilynx_autoplay class on your preview container.

<div class="vilynx_autoplay" data-vilynx-id="your_video_ID">
    <img src="img/bg01.jpg">
</div>

If you want more customization on the autoplay behavior check Autoplay options section.

Previews with audio

If you want your previews to play with audio, add a data-audio parameter to the Gallery script tag:

<script type="text/javascript" src="//static.vilynx.com/gallery/vpg.{{galleryVersion}}.min.js"
        data-publickey="your_public_key"
        data-audio="true"></script>

If you only want audio enabled on specific elements you can use the single item configuration and add vilynx_audio class to the preview container.

<div class="vilynx_audio" data-vilynx-id="your_video_ID">
    <img src="img/bg01.jpg">
</div>

If you want more customization on the audio behavior check Audio options section.

Webkit browsers don't allow media content to play with audio if there isn't a user interaction with the site first. The Gallery library will play the previews with audio in this case, check Audio policies section for more information.

Mobile experience

On mobile devices, the Gallery's default behavior is one autoplay preview at a time that starts to play when the element is in the viewport. But this can be modified.

Autoplay on all previews

By default only one preview will be playing at a time. If you want that all the previews starts playing when they are on viewport you need to add data-allautolay on your Gallery script tag.

<script type="text/javascript" src="//static.vilynx.com/gallery/vpg.{{galleryVersion}}.min.js"
        data-publickey="your_public_key"
        data-allautoplay="true"></script>

On iOs devices multiple media content playing at the same time is not allowed. In this case Gallery plugin will fallback to GIFs instead of HTML Video elements.

Previews playing on tap

In addition to autoplaying when the preview enters the viewport, previews can be played with a swipe action. To get this behavior add data-taptoplay on your Gallery script tag.

<script type="text/javascript" src="//static.vilynx.com/gallery/vpg.{{galleryVersion}}.min.js"
        data-publickey="your_public_key"
        data-taptoplay="true"></script>

CTA message at preview's end

Similar to redirect for Desktop browsers, on mobile you can add a CTA (call-to-action) message at the end of the preview adding data-mobilecta on your Gallery script tag.

<script type="text/javascript" src="//static.vilynx.com/gallery/vpg.{{galleryVersion}}.min.js"
        data-publickey="your_public_key"
        data-mobilecta="true"></script>

If you only want the mobile CTA on some specific elements you can use the single item configuration and add a vilynx_mobilecta class to your preview container.

<div class="vilynx_mobilecta" data-vilynx-id="your_video_ID">
    <img src="img/bg01.jpg">
</div>

If you want more customization on the mobile CTA behavior check Mobile options section.

Work with multiple images

Gallery plugin uses the preview thumbnail to place the preview, in the same position and with the same dimensions. If multiple preview thumbnail candidates are found inside the preview container, it will use the first it finds. If this first image is not the one needed you can use imgignore parameter to ignore it.

For example, imagine that you have inside your preview container two HTML Images, one is your preview thumbnail and the other is a play icon with play_icon class:

<div data-vilynx-id="your_video_ID">
    <img src="img/icon.jpg" class="play_icon"/>
    <img src="img/bg01.jpg"/>
</div>

With that structure the Gallery plugin could get confused and conisder your first image as the preview thumbnail. If the imgignore parameter is added on the Gallery script tag with .play_icon value the Gallery will ignore all the image candidates that matches this Query Selector. Your script tag would look like:

<script type="text/javascript" src="//static.vilynx.com/gallery/vpg.{{galleryVersion}}.min.js"
        data-publickey="your_public_key"
        data-imgignore=".play_icon"></script>

Background images support

The Gallery library supports any element with background image as an image candidate. By default every <div> and <button> tag is inspected by the Gallery to look for a background image.

In this example the <div> tag will be identified as an image candidate:

<div data-vilynx-id="your_video_external_id">
    <div style="background-image: url('img/bg01.jpg')"/>
</div>

If you have any other tag on your website that needs to be used as an image candidate for the Gallery library, you have to add it on bgimageselector as a Query Selector.

In this example Gallery library will look for <div> and <span> tags as image candidates:

<script type="text/javascript" src="//static.vilynx.com/gallery/vpg.{{galleryVersion}}.min.js"
        publickey="your_public_key"
        bgimageselector="div, span"></script>
<div data-vilynx-id="your_video_external_id">
    <div style="background-image: url('img/bg01.jpg')"/>
</div>

<div data-vilynx-id="your_video_external_id">
    <span style="background-image: url('img/bg02.jpg')"/>
</div>

Lazy loading

Image lazy loading

Gallery plugin supports lazy loading with a placeholder image without any extra configuration.

Otherwise, if the <img> tag doesn't exists when the DOM is loaded, the element with the Vilynx identifier needs to have vilynx_enabled class to be observed by the library for an image addition.

For example:

<div class="vilynx_enabled" data-vilynx-id="your_video_external_id">
</div>
<a href="your_video_URL" class="vilynx_enabled">
</a>

These elements will be observed until a valid image candidate is appended on it. When the image appears the preview will be placed behind it.

Video ID lazy loading

Apart from image lazy loading, Gallery library has also support for data-vilynx-id attribute lazy loading.

The Gallery will observe elements with vilynx_enabled that don't have a data-vilynx-id attribute. When a valid identifier is added, the library will add a preview on that element.

Here the <div> tag does not have an external identifier:

<div class="vilynx_enabled">
    <img src="img/bg01.jpg">
<div>

Since the element has the vilynx_enabled class, the Gallery knows it could be a valid element in the future and will observe it until a data-vilynx-id is added, then add the preview.