0

I have a major problem that I was hoping someone here might be able to help me with, or point me into the right direction.

I've built a whole website around a light box gallery called LightGallery - (https://github.com/sachinchoolur/lightGallery)

It was working fine with the Vimeo videos I was using, however the client has just informed me that the videos now need to be hosted on Wistia.

Seeing the benefits Wisita has over Vimeo for statistic reporting makes sense, but I have not the slightest clue as to go about doing so. Im a front end designer who has been winging it with the help of google.

Is this something that is in the realm of medium difficulty for me to achieve? or Should I start over, looking for a plugin that already allows wistia?

thanks in advance for any help you might offer.

best, Nic

Geo Jacob
  • 5,909
  • 1
  • 36
  • 43
Nicholas Padula
  • 173
  • 1
  • 9

1 Answers1

0

Working with Wistia videos is going to be as easy as working with Vimeo (or similar).

Wistia allows you to embed the video in many different ways: using HTML5, Flash players, iframes... and LightGallery allows you to have one section as HTML, so just put your Wistia code to a hidden div (using display:none), and add it to LightGallery. Really simple, no?

Here is a quick example:

$(document).ready(function() {
    $("#lightGallery").lightGallery(); 
});

<div id="inlineSubHtml" style="display:none">
    <iframe src="http://fast.wistia.net/embed/iframe/479268413a" width="600" height="480"></iframe>
</div>

<ul id="lightGallery">
    <li data-src="http://lorempixel.com/200/200/people">
        <img src="http://lorempixel.com/200/200/people" />
    </li>
    <li data-src="http://lorempixel.com/200/200/nature">
        <img src="http://lorempixel.com/200/200/nature" />
    </li>
    <li data-sub-html="#inlineSubHtml">
        <img src="http://lorempixel.com/200/200/sports" />
    </li>
</ul>

You can see it working on this JSFiddle: http://jsfiddle.net/d71763ta/

Or even easier, according to the documentation:

Iframe support

Set attribute data-iframe=”true” to open the given ‘data-src’ in an iframe. You can display google map, external website etc. using this method

So if you use Wistia with an iframe (as above), you could add it directly as a section.

Alvaro Montoro
  • 28,081
  • 7
  • 57
  • 86
  • You can see a full example in the JSFiddle. I would have added a running demo, but it didn't work directly on StackOverflow because the document is sandboxed and lacks the 'allow-same-origin' flag. – Alvaro Montoro Jul 28 '15 at 22:37