Sunday, 5 July 2015

Using Lightbox for Bootstrap 3 in XPages Part III - Data-Remote

In this blog post I will show how an image or video can be opened in the Lightbox Plugin via data-remote. See also my previous blog posts Bootstrap JS Modal plugin in XPages: Using Lightbox for Bootstrap 3 Part I and Using Lightbox for Bootstrap 3 in XPages Part II - Programatically call.

In the following setup I use images from the WebContent Folder 'Images'. It is also possible to use 'remote' images (see later in this blog post). For the videos in this example it is sufficient to take over the web address.

Setup data-remote in an XPage
<div class="col-sm-10">
<div class="row">
<img src="images/bs.png" data-toggle="lightbox" data-remote="//www.youtube.com/watch?v=tvkA_7hhsMI" class="img-responsive col-sm-5" data-title="Lightbox Plugin" data-footer="Data-Remote"></img>
<img src="images/webvideo.jpg" data-toggle="lightbox" data-remote="//www.youtube.com/watch?v=ntVFNjKnljE" class="img-responsive col-sm-5" data-title="Lightbox Plugin" data-footer="Data-Remote"></img>
</div>
</div>

The final result using a data-remote.


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-10">
<div class="row">
<img src="images/bs.png" data-toggle="lightbox" data-remote="//www.youtube.com/watch?v=tvkA_7hhsMI" class="img-responsive col-sm-5" data-title="Lightbox Plugin" data-footer="Data-Remote"></img>
<img src="images/webvideo.jpg" data-toggle="lightbox" data-remote="//www.youtube.com/watch?v=ntVFNjKnljE" class="img-responsive col-sm-5" data-title="Lightbox Plugin" data-footer="Data-Remote"></img>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

For an image, the following syntax can be used:
<img src="//ecx.images-amazon.com/images/I/51Sz3FG372L.jpg" data-toggle="lightbox" data-remote="http://ecx.images-amazon.com/images/I/51Sz3FG372L.jpg" data-title="Lightbox Plugin" data-footer="Data-Remote" class="img-responsive col-sm-5"></img>

No comments:

Post a Comment