Thursday, 10 September 2015

jQuery in XPages: Introducing jGallery A Mobile friendly flexible jQueryPhoto Gallery with Albums and Swipe Events

In this blog post I will show how jGallery can be used in XPages. jGallery is a mobile friendly, flexible jQuery photo gallery with albums, preloader and swipe events. jGallery can also be used as a Slider in an XPage. In this first blog post about jGallery I will show the basic setup in XPages.

Main Features jGallery
  • Mobile friendly (version v1.5.0)
  • Touch gestures support
  • Flexiblity, easy to customize
  • More than 50 configuration parameters.
  • 67 transition effects
  • Unlimited scalability
  • Saving browser history
  • Modern technologies
  • CSS3, scalable vector icons .etc
  • Compatibility with all major browsers
  • Retina friendly

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


Next the JavaScript and CSS files, jgallery.js and jgallery.css must be included on the XPage or Custom Control. In this example I add the files to an XPage. Optional include also font-awesome.min.css.

<link rel="stylesheet" type="text/css" media="all" href="jgallery/dist/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="jgallery/dist/css/jgallery.css" />
<script type="text/javascript" src="jgallery/dist/js/jgallery.js"></script>

B. Adding the x$ jQuery selector for XPages
Furthermore I use the the great XSnippet by Mark Roden (again), x$ jQuery selector for XPages, to initialize the plugin and include it on the XPage. The XSnippet can be added to the Script Libraries. The script itself can be made up as follows. In the example below a number of standard options are used. More on this in the next blog post.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:gallery}" ).jGallery( {
transitionCols:"6",
transitionRows:"1",
thumbnailsPosition:"bottom",
thumbType:"image",
backgroundColor:"FFFFFF",
textColor:"000000",
height: '80vh',
width: '100%',
mode:"standard"
} );
} );
]]></xp:this.value>
</xp:scriptBlock>

C. Setup Gallery
The setup of the Gallery is quite simple in an XPage.

<div id="gallery">
<a href="jgallery/dist/images/large/1.jpg">
<img src="jgallery/dist/images/thumbs/1.jpg" alt="Photo 1" />
</a>
<a href="jgallery/dist/images/large/2.jpg">
<img src="jgallery/dist/images/thumbs/2.jpg" alt="Photo 2" />
</a>
<a href="jgallery/dist/images/large/3.jpg">
<img src="jgallery/dist/images/thumbs/3.jpg" alt="Photo 3" />
</a>
</div>

D. Final result in XPages
The final result is a properly functioning 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">
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<link rel="stylesheet" type="text/css" media="all" href="jgallery/dist/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="jgallery/dist/css/jgallery.css" />
<script type="text/javascript" src="jgallery/dist/js/jgallery.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:gallery}" ).jGallery( {
transitionCols:"6",
transitionRows:"1",
thumbnailsPosition:"bottom",
thumbType:"image",
backgroundColor:"FFFFFF",
textColor:"000000",
height: '80vh',
width: '100%',
mode:"standard"
} );
} );
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div>
<div id="gallery">
<a href="jgallery/dist/images/large/1.jpg">
<img src="jgallery/dist/images/thumbs/1.jpg" alt="Photo 1" /></a>
<a href="jgallery/dist/images/large/2.jpg">
<img src="jgallery/dist/images/thumbs/2.jpg" alt="Photo 2" /></a>
<a href="jgallery/dist/images/large/3.jpg">
<img src="jgallery/dist/images/thumbs/3.jpg" alt="Photo 3" /></a>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

In the next blog post I will explain the various options of jGallery further. I will also show how jGallery can be used as Slider in an XPage. So stay tuned!

No comments:

Post a Comment