Sunday, 9 August 2015

Bootstrap in XPages: Using Lightbox for Bootstrap 3 in XPages Part V - Forcing width using a data attribute

It's been a while since I wrote a new blog post on using Lightbox for Bootstrap 3 in XPages. With this blog post I'm going to spend more time on this subject again. Let's start with a relatively simple example which, however, can be used in several situations in a convenient way. In this blog post I will show how to set the width of a video. A quick reminder: Lightbox is a gallery plugin for Bootstrap 3 based on the modal plugin. It Utilizes Bootstraps modal plugin to implement the lightbox gallery.

Related blog posts
Bootstrap JS Modal plugin in XPages: Using Lightbox for Bootstrap 3 Part I
Using Lightbox for Bootstrap 3 in XPages Part II - Programatically call
Using Lightbox for Bootstrap 3 in XPages Part III - Data-Remote
Using Lightbox for Bootstrap 3 in XPages Part IV - Vimeo videos

Forcing width using the data attribute data-width
To force the width of a video you simply use the data attribute date-width.
<div>
<a href="http://www.youtube.com/watch?v=d7oiNXQfLeU" data-toggle="lightbox"
data-width="640" data-title="Lightbox Plugin" data-footer="Forcing Width">640 x 360</a>
</div>

The final result using data-width


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>
<a href="http://www.youtube.com/watch?v=d7oiNXQfLeU" data-toggle="lightbox" data-title="Lightbox Plugin" data-footer="Forcing Width">Standard</a>
</div>
<div>
<a href="http://www.youtube.com/watch?v=d7oiNXQfLeU" data-toggle="lightbox" data-width="640" data-title="Lightbox Plugin" data-footer="Forcing Width">640 x 360</a>
</div>
<div>
<a href="http://www.youtube.com/watch?v=d7oiNXQfLeU" data-toggle="lightbox" data-width="1280" data-title="Lightbox Plugin" data-footer="Forcing Width">1280 x 780</a>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

No comments:

Post a Comment