Friday, 28 August 2015

Bootstrap in XPages: Using flexImages a lightweight jQuery plugin for creating fluid galleries in XPages

In this blog post I will show how you can use flexImages in XPages. flexImages is a lightweight jQuery plugin for creating fluid galleries as seen on Flickr and Google Images. It is less than 1 kB in size (minified and gzipped) it’s extremely lightweight. A bunch of options makes this plugin highly flexible and it even works with more than just images. In fact, any content may be used – be it images, videos, plain text or all mixed together.

Features flexImages:
  • Works with more than just images, e.g. videos, iframes and plain text
  • Responsive
  • Equal margins between images controlled via CSS
  • No cropping
  • No reordering
  • Source images/objects can have any size
  • AJAX ready, e.g. for infinite scrolling
  • Wide browser support, including IE >= 7
  • Support for lazy loading of images and iframe contents
  • Layout options to control e.g. the maximum number of rows – or whether or not to display an incomplete (last) row.

The basic setup in XPages
To use the flexImages jQuery plugin in XPages first the flexImages files must be downloaded and added to the WebContent Folder in the Package Explorer.
You can download the flexImages files from GitHub : flexImages
Next the JavaScript file / Stylesheet  fleximages/jquery.flex-images.js and fleximages/jquery.flex-images.css must be included on the XPage or Custom Control. In this example I add the files directly to the XPage.

<script type="text/javascript" src="fleximages/jquery.flex-images.js"></script>
<link rel="stylesheet" href="fleximages/jquery.flex-images.css" />

Each image that we will use must be wrapped inside a container element. The container must have a width (data-w) and height (data-h) attribute set that corresponds to the image's/object's original dimension. The plugin dynamically changes the width and height of all containers. The images themselves have their height and width set to 100%. Thus, each image takes up the full space inside its container.

<div class="flex-images">
<div class="item" data-w="300" data-h="200"><img src="images/FI1.jpg"></img></div>
<div class="item" data-w="300" data-h="200"><img src="images/FI2.jpg"></img></div>
<div class="item" data-w="300" data-h="200"><img src="images/FI3.jpg"></img></div>
<div class="item" data-w="300" data-h="200"><img src="images/FI4.jpg"></img></div>
</div>

To initialize the plugin you can use this simple script:
$('.flex-images').fleximages({rowHeight: 140});

The final result in XPages is a fluid responsive image gallery.

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="fleximages/jquery.flex-images.js"></script>
<link rel="stylesheet" href="fleximages/jquery.flex-images.css" />
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="flex-images">
<div class="item" data-w="300" data-h="200"><img src="images/FI1.jpg"></img></div>
<div class="item" data-w="300" data-h="200"><img src="images/FI2.jpg"></img></div>
<div class="item" data-w="300" data-h="200"><img src="images/FI3.jpg"></img></div>
<div class="item" data-w="300" data-h="200"><img src="images/FI4.jpg"></img></div>
</div>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
<script>
$('.flex-images').fleximages({rowHeight: 140});
</script>
</xp:view>

2 comments:

  1. Replies
    1. Dank je wel Rob. Als ik niet achter mijn scherm zit ben ik in de natuur te vinden met mijn honden en fototoestel :)

      Delete