Sunday, 31 January 2016

Combining Justified Gallery and Swipebox in XPages for an amazing Image Gallery

This week is IBM Connect 2016 week. For everyone who is attending, lots of success and have a great time!


In this blog post I will give a basic setup on combining Justified Gallery and Swipebox in XPages to create an amazing Image Gallery. This question was recently asked by a client of us who worked a lot with various sizes of images and wanted to use these images in a great looking gallery in an XPages application.
Justified Gallery is a JQuery plugin that allows you to create an high quality justified gallery of images. Fill all the spaces!
A common problem, for people who create applications, is to create an elegant image gallery that manages the various sizes of images. Flickr and Google+ manage this situation in an excellent way, the purpose of this plugin is to give you the power of these solutions, with a new fast algorithm.
Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet. For more information about Swipebox see my blog post 'jQuery in XPages: Using Swipebox A touchable jQuery Lightbox in XPages'. To use Swipebox with the Justified Gallery a listener for the jg.complete callback is needed, $('#swipeboxgallery a').swipebox();.

Setup in XPages
To use the Justified Gallery and Swipebox in XPages the Justified Gallery and Swipebox files must be downloaded and added to the WebContent Folder in the Package Explorer.
You can download the Justified Gallery files from GitHub : Justified Gallery
You can download the Swipebox files from GitHub : Swipebox
Next the JavaScript files and Stylesheets must be included on the XPage or Custom Control. In this example I add the files directly to the XPage.

<link rel="stylesheet" href="justified/css/justifiedGallery.css" />
<script src="justified/js/jquery.justifiedGallery.js"></script>
<script type="text/javascript" src="swipebox/js/jquery.swipebox.js"></script>
<link rel="stylesheet" href="swipebox/css/swipebox.css" type="text/css" />

To initialize the plugin you can use a simple script. In the example below I use some options.

$('#mygallery').justifiedGallery({
    lastRow : 'nojustify',
    rowHeight : 120,
    rel : 'gallery',
    margins : 3
}).on('jg.complete', function () {
    $('#mygallery a').swipebox({
    useSVG : false // false to force the use of png for buttons
});
});

Final Result
The final result is an amazing responsive image gallery using various sizes of images.

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">
<link rel="stylesheet" href="justified/css/justifiedGallery.css" />
<script src="justified/js/jquery.justifiedGallery.js"></script>
<script type="text/javascript" src="swipebox/js/jquery.swipebox.js"></script>
<link rel="stylesheet" href="swipebox/css/swipebox.css" type="text/css" />
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div id="mygallery">
<a href="images/Photo1.jpg"><img alt="Nature 1" src="images/Photo1.jpg" /></a>
<a href="images/Photo2.jpg"><img alt="Nature 2" src="images/Photo2.jpg" /></a>
<a href="images/Photo3.jpg"><img alt="Nature 3" src="images/Photo3.jpg" /></a>
<a href="images/Photo4.jpg"><img alt="Nature 4" src="images/Photo6.jpg" /></a>
<a href="images/Photo5.jpg"><img alt="Nature 5" src="images/Photo7.jpg" /></a>
<!-- other images... -->
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
<script>
$('#mygallery').justifiedGallery({
lastRow : 'nojustify',
rowHeight : 120,
rel : 'gallery',
margins : 3
}).on('jg.complete', function () {
$('#mygallery a').swipebox({
useSVG : false // false to force the use of png for buttons
});
});
</script>
</xp:view>

More information about the Justified Gallery : Justified Gallery - Elegant, Fast, Endless

No comments:

Post a Comment