Friday, 2 October 2015

jQuery in XPages: Using Image Viewer A Versatile and Flexible jQuery Image Viewer Plugin in XPages

Last week we had to implement an image viewer in a XPages database for presentation purposes. The viewer should be able to rotate, flip and zoom images. The choice was an easy one, Viewer.  In my opinion one of the best and perhaps the best jQuery Image Viewer plugin I've come across so far.
In this blog post I will show how Viewer, a Versatile and Flexible jQuery Image Viewer Plugin, can be used in XPages. Viewer is a powerful, multi-functional, cross-browser and highly configurable image viewer plugin used to present your favorite images in an elegant way. In the description below I use the setup that we used in our XPages database.

Main Features Viewer
  • Responsive and touch friendly.
  • Keyboard support.
  • Modal and Gallery modes.
  • Allows to zoom, rotate, flip images.
  • Tons of configuration options and APIs.

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


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

<link rel="stylesheet" href="viewer/css/main.css" />
<link rel="stylesheet" href="viewer/css/viewer.css" />  
<script type="text/javascript" src="viewer/js/main.js"></script>
<script type="text/javascript" src="viewer/js/viewer.js"></script>

B. AMD Loader Fix
The JavaScript file viewer.js need 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 viewer.js
2. Select Open With - Client/Server JS Editor
3. Remove in the second line define.amd and replace it with false
4. Save the JavaScript file


C. Setup Gallery
The setup of the Gallery is quite simple in an XPage. The data-original attribute is used to specify the original version of the image.

<div class="row">
<div class="col-md-10">
<ul class="docs-pictures">
<img data-original="images/viewer1.jpg" src="images/thumbs/viewer1.jpg" ></img>
<img data-original="images/viewer2.jpg" src="images/thumbs/viewer2.jpg" ></img>
<img data-original="images/viewer3.jpg" src="images/thumbs/viewer3.jpg" ></img>
</ul>
</div>
</div>

D. Final result in XPages
The final result is a great responsive Gallery in XPages. Very easy to implement an use.


E. 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="viewer/css/main.css" type="text/css" />
<link rel="stylesheet" href="viewer/css/viewer.css" />  
<script type="text/javascript" src="viewer/js/main.js"></script>
<script type="text/javascript" src="viewer/js/viewer.js"></script>
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="row">
<div class="col-md-10">
<ul class="docs-pictures">
<img data-original="images/viewer1.jpg" src="images/thumbs/viewer1.jpg" ></img>
<img data-original="images/viewer2.jpg" src="images/thumbs/viewer2.jpg" ></img>
<img data-original="images/viewer3.jpg" src="images/thumbs/viewer3.jpg" ></img>
</ul>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

For more information about Viewer: A jQuery image viewing plugin.

No comments:

Post a Comment