Tuesday, 16 June 2015

Bootstrap JS Modal plugin in XPages: Using Lightbox for Bootstrap 3 Part I

In this blog post I show how through the Lightbox Plugin the functionality of the Bootstrap JS Modal can be extended. Lightbox for Bootstrap 3 utilizes Bootstraps modal plugin to implement a lightbox gallery. In other words, a lightbox module for Bootstrap that supports images, YouTube videos, and galleries - built around Bootstrap's Modal plugin. In this first part of this series, the basic setup will be explained.
In order to use the Lightbox Plugin, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Lightbox for Bootstrap 3.

Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In this example a Folder lightbox has been added in the WebContent Folder.


Next the JavaScript and CSS files, ekko-lightbox.js and ekko-lightbox.css, must be included on the XPage or Custom Control. In this example I add the files to an XPage.

<script type="text/javascript" src="lightbox/ekko-lightbox.js"></script>
<link rel="stylesheet" href="lightbox/ekko-lightbox.css" type="text/css" />

Initializing the plugin
To to initialize the plugin the script below is used in this basic setup.

<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>

Basic setup in XPages
<div class="col-sm-4">
<a href="images/bs.png" data-toggle="lightbox"
data-title="Lightbox Plugin" data-footer="Basic Setup">
<img src="images/Photo1.jpg" class="img-responsive"></img>
</a>
</div>

Remark: you can use for example the modal plugin title option via data-title and the custom footer tag using data-footer.

The result is a responsive Lightbox using the Bootstrap JS Modal.


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-4">
<a href="images/bs.png" data-toggle="lightbox" data-title="Lightbox Plugin" data-footer="Basic Setup">
<img src="images/bs.png" class="img-responsive"></img>
</a>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

In the next post we will further expand the Lightbox Plugin.

3 comments:

  1. Are all your bootstrap examples somewhere available e.g. collected in an NSF or Github project?

    ReplyDelete
    Replies
    1. If I find the time I will publish next week the demo database with all the examples.

      Delete
    2. great! thank you in advance

      Delete