Sunday, 12 July 2015

Using Lightbox for Bootstrap 3 in XPages Part IV - Vimeo videos

In this blog post I will show how a Vimeo video can be opened in the Lightbox Plugin. Vimeo videos can not be embedded using the standard url (ie http://vimeo.com/56216081); in this case we must link to the embedded source (ie player.vimeo.com/video/56216081). This means the link url, if the JavaScript fails, will open the full screen player. The solution for this is to set the lightbox source directly.
See also my previous blog posts Bootstrap JS Modal plugin in XPages: Using Lightbox for Bootstrap 3 Part IUsing Lightbox for Bootstrap 3 in XPages Part II - Programatically call and Using Lightbox for Bootstrap 3 in XPages Part III - Data-Remote.

Setup Vimeo Video with data-remote in an XPage
<div class="col-sm-5">
<a href="http://vimeo.com/56216081" data-remote="http://player.vimeo.com/video/56216081" data-toggle="lightbox" data-title="Lightbox Plugin" data-footer="Vimeo Videos">OMNIA - The Sheenearlahi Set</a>
</div>

The final result using a Vimeo video.


Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<script type="text/javascript" src="lightbox/ekko-lightbox.js"></script>
<link rel="stylesheet" href="lightbox/ekko-lightbox.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function ($) {
// delegate calls to data-toggle="lightbox"
$(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
if (window.console) {
return console.log('Checking our the events huh?');
}
},
onNavigate: function(direction, itemIndex) {
if (window.console) {
return console.log('Navigating '+direction+'. Current item: '+itemIndex);
}
}
});
});
$(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
var a = this.modal_content.find('.modal-footer a');
if(a.length > 0) {
a.click(function(e) {
e.preventDefault();
this.navigateTo(2);
}.bind(this));
}
}
});
});
});
</script>
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="col-sm-5">
<a href="http://vimeo.com/56216081" data-remote="http://player.vimeo.com/video/56216081" data-toggle="lightbox" data-title="Lightbox Plugin" data-footer="Vimeo Videos">OMNIA - The Sheenearlahi Set</a>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

In the next post will look more closely to Column wrappers.

No comments:

Post a Comment