lightGallery Table
How to use lightgallery with table..
HTML
<script src="http://sachinchoolur.github.io/lightGallery/light-gallery/js/lightGallery.min.js"></script>
<link rel="stylesheet" href="http://sachinchoolur.github.io/lightGallery/light-gallery/css/lightGallery.css">
<script src="http://vjs.zencdn.net/4.11/video.js"></script>
<link rel="stylesheet" href="http://vjs.zencdn.net/4.11/video-js.css">
<!-- apply class awesome_video_class0 awesome_video_class1 respectively -->
<div style="display:none;" id="video1">
<video class="video-js vjs-default-skin awesome_video_class0 object" controls preload="auto" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://videoservices.interaktivfabrik.net/v/standard/19975/132b35d897ba1792363e25d6a773f1cd.mp4" type='video/mp4' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</div>
<div style="display:none;" id="video2">
<video class="video-js vjs-default-skin awesome_video_class1 object" controls preload="auto" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://videoservices.interaktivfabrik.net/v/standard/19975/132b35d897ba1792363e25d6a773f1cd.mp4" type='video/mp4' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</div>
<table id="localVideo">
<tr>
<th>#</th>
<th>Columna</th>
</tr>
<tr>
<td>1</td>
<td class="selector" data-html="#video1" data-sub-html=".subhtml"> <a href="#">
<img src="http://sachinchoolur.github.io/lightGallery/img/Big-Buck-Bunny.jpg" />
</a>
</td>
</tr>
<tr>
<td>2</td>
...
CSS
#localVideo th, #localVideo td {
padding:0.8em;
border: 1px solid;
}
#localVideo th {
background-color:#6699FF;
font-weight:bold;
}
JavaScript
function loadVideo($obj) {
if (!$obj.hasClass('videoLoaded')) {
var _class = 'awesome_video_class' + $obj.index();
console.log(document.getElementsByClassName(_class)[0])
videojs(document.getElementsByClassName(_class)[0], {}, function () {});
$obj.addClass('videoLoaded');
}
}
$('#localVideo').lightGallery({
selector: '.selector',
onOpen: function () {
setTimeout(function () {
var $obj = $('.lightGallery-slide.current');
loadVideo($obj)
});
},
onSlideAfter: function () {
setTimeout(function () {
var $obj = $('.lightGallery-slide.current');
loadVideo($obj)
});
}
});