Sunday, 6 September 2015

jQuery in XPages: Using Swipebox A touchable jQuery Lightbox in XPages

In this blog post I will show how Swipebox, a touchable jQuery lightbox, can be used in XPages. Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet. Swipebox is compatible with Chrome, Safari, Firefox, Opera, IE9+, IOS4+, Android, windows phone.

Main Features
  • Swipe gestures for mobile
  • Keyboard Navigation for desktop
  • CSS transitions with jQuery fallback
  • Retina support for UI icons
  • Easy CSS customization

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


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

B. Initialize the plugin
To initialize the plugin you can use a simple script. In the example below I use the option 'useSVG : false' to force the use of png for buttons.
<script type="text/javascript">
;( function( $ ) {
$( '.swipebox' ).swipebox( {
useSVG : false // false to force the use of png for buttons
} );
} )( jQuery );
</script>

You can use to following standard options:
  • useCSS : true (false will force the use of jQuery for animations)
  • useSVG : true (false to force the use of png for buttons)
  • initialIndexOnArray : 0 (which image index to init when a array is passed)
  • hideCloseButtonOnMobile : false (true will hide the close button on mobile devices)
  • hideBarsDelay : 3000 (delay before hiding bars on desktop)
  • videoMaxWidth : 1140 (videos max width)
  • beforeOpen: function() {} (called before opening)
  • afterOpen: null (called after opening)
  • afterClose: function() {} (called after closing)
  • loopAtEnd: false (true will return to the first image after the last image is reached)

C. Setup image links
The setup of the image link(s) is quite simple in an XPage. Use a specific class for the (image) links and use the title attribute as caption.

<a href="big/image.jpg" class="swipebox" title="My Caption">
<img src="small/image.jpg" alt="image">
</a>

D. Final result in XPages
The final result is a properly functioning responsive lightbox 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">
<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">
<div class="col-sm-3">
 <a href="images/Photo1.jpg" class="swipebox"  title="Nature 1" >
<img src="images/FI1.jpg" alt="image" class="img-responsive"></img>
</a>
</div>
<div class="col-sm-3">
 <a href="images/Photo2.jpg" class="swipebox" title="Nature 2">
<img src="images/FI2.jpg" alt="image" class="img-responsive"></img>
</a>
</div>
<div class="col-sm-3">
<a href="images/Photo3.jpg" class="swipebox" title="Blue Heron">
<img src="images/FI3.jpg" alt="image" class="img-responsive"></img>
</a>
 </div>  
<xp:br></xp:br>
</xp:panel></xp:this.facets></xc:ccLayoutBootstrap>
<script type="text/javascript">
;( function( $ ) {
$( '.swipebox' ).swipebox( {
useSVG : false // false to force the use of png for buttons
} );
} )( jQuery );
</script>
</xp:view>

No comments:

Post a Comment