Monday, 29 February 2016

Using blueimp Gallery A Touch-Enabled, Responsive and Customizable Image and Video Gallery, Carousel and Lightbox in XPages

In this blog post I will show how blueimp Gallery can be used in XPages. blueimp Gallery is a touch-enabled, responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support and on-demand content loading and can be extended to display additional content types. In this blog post the Lightbox Setup is described.

Setup in XPages
A. Adding the JS and CSS files
In order to use blueimp Gallery, the JavaScript and CSS files needs to be included on the XPage or Custom Control. The latest version can be downloaded from GitHub: blueimp Gallery. In this example a Folder blueimp has been added in the WebContent Folder in the Package Explorer.


Next the JavaScript and CSS files, blueimp-gallery.js and blueimp-gallery.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="blueimp/js/blueimp-gallery.js"></script>
<link rel="stylesheet" href="blueimp/css/blueimp-gallery.css" />

B. Lightbox setup
The first step is to create a list of links to image files, optionally with enclosed thumbnails and add them to the body of the XPage.

<div id="links">
<a href="images/image1.jpg" title="Photo 1">
<img src="images/thumbs/viewer1.jpg" alt="Photo1"></img>
</a>
<a href="images/image2.jpg" title="Photo2">
<img src="images/thumbs/viewer2.jpg" alt="Photo2"></img>
</a>
<a href="images/image3.jpg" title="Photo3">
<img src="images/thumbs/viewer3.jpg" alt="Photo3"></img>
</a>
</div>

The second step is to add of the Gallery widget to the body of the XPage.

<!-- The Gallery as lightbox dialog, should be a child element of the XPage body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>

C. Initialize the Gallery
The following JavaScript code must be added after including the Gallery script to display the images in the Gallery lightbox on click on the links.

<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>

D. AMD Loader Fix
Finally, the JavaScript file blueimp-gallery.js needs to be adjusted. Reason: newer jQuery plugins try to use its AMD loader, but that doesn't play well with the Dojo implementation in XPages. The source code of the library can be adjusted in a very simple way with just a slight modification.



1. Go to the WebContent Folder and select the JavaScript file blueimp-gallery.js
2. Select Open With - Client/Server JS Editor
3. Removed in the second line define.amd and replace it with false
4. Save the JavaScript file blueimp-gallery.js

E. CSS Fix
In order to show the play-pause image images I had to replace the SVG images in the CSS file by PNG images.


F. Final result in XPages


G. 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="blueimp/js/blueimp-gallery.js"></script>
<link rel="stylesheet" href="blueimp/css/blueimp-gallery.css" />
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div id="links">
<a href="images/viewer1.jpg" title="Photo1">
<img src="images/thumbs/image1.jpg" alt="Photo1"></img>
</a>
<a href="images/viewer2.jpg" title="Photo2">
<img src="images/thumbs/image2.jpg" alt="Photo2"></img>
</a>
<a href="images/viewer3.jpg" title="Photo3">
<img src="images/thumbs/image3.jpg" alt="Photo3"></img>
</a>
</div>
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
</xp:view>

No comments:

Post a Comment