Sunday, 30 August 2015

Bootstrap in XPages: Using jQuery Fullsizable in XPages supporting the native HTML5 fullscreen API in modern browsers

In this blog post I will show how the JQuery plugin Fullsizable can be used in XPages.
jQuery fullsizable is a jQuery plugin to make use of the full available browser space for enjoyable image viewing. Also supports the native HTML5 fullscreen API in modern browsers. Make use of the full available browser space for enjoyable image viewing!

Fullsizable Options
  • detach_id (optional, defaults to null) - id of an element that will temporarily be set to display: none after the curtain loaded. This can be used to hide scrollbars on long pages by e.g. detaching a wrapper element.
  • navigation (optional, defaults to true) - show next and previous links when working with a set of images. Style links with #fullsized_go_prev and #fullsized_go_next
  • closeButton (optional, defaults to true) - show a close link. Style with #fullsized_close
  • fullscreenButton (optional, defaults to true) - show full screen button for native HTML5 fullscreen support in supported browsers. Style with #fullsized_fullscreen
  • openOnClick (optional, defaults to true) - set to false to disable default behaviour which fullsizes an image when clicking on a thumb.
  • clickBehaviour (optional, 'next' or 'close', defaults to 'close') - whether a click on an opened image should close the viewer or open the next image.
  • preload (optional, defaults to true) - lookup selector on initialisation, set only to false in combination with reloadOnOpen: true or fullsizable:reload event.
  • reloadOnOpen (optional, defaults to false) - lookup selector every time the viewer opens.

Setup Fullsizable in XPages
To use the fullsizable jQuery plugin in XPages first the fullsizable files must be downloaded and added to the WebContent Folder in the Package Explorer.
You can download the fullsizable files from GitHub : fullsizable
Next the JavaScript file / Stylesheets  jquery-fullsizable.js, jquery-fullsizable.css and jquery-fullsizable-theme.css must be included on the XPage or Custom Control. In this example I add the files directly to the XPage. The fullsizable.css stylesheet provides only the bare bones to make fullsizable work. The 'fullsizable-theme.css' stylesheet is also available in the download and provides more default options.

<link rel="stylesheet" href="jqueryfullsizable/css/jquery-fullsizable.css" />
<link rel="stylesheet" href="jqueryfullsizable/css/jquery-fullsizable-theme.css" />
<script src="jqueryfullsizable/js/jquery-fullsizable.js"></script>

To initialize the plugin you can use a script. In the example below I use some options.
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
$('a').fullsizable({
detach_id: 'container',
clickBehaviour: 'next'        
}); 
});
]]></xp:this.value>

The final result in XPages


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="jqueryfullsizable/css/jquery-fullsizable.css" />
<link rel="stylesheet" href="jqueryfullsizable/css/jquery-fullsizable-theme.css" />
<script src="jqueryfullsizable/js/jquery-fullsizable.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
$('a').fullsizable({
detach_id: 'container',
clickBehaviour: 'next'      
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="col-8" >
<a href="images/Lightbox1.jpg" class="fullsizable"><img alt="Image 1" src="images/FI1.jpg"></img></a>
<a href="images/Lightbox2.jpg" class="fullsizable"><img alt="Image 2" src="images/FI2.jpg"></img></a>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

Remark: For the above exampleI adjusted the jquery-fullsizable-theme.css a little. The CSS file can be customized to your own insights (and wishes).

#fullsized_go_prev, #fullsized_go_next {
position: absolute;
top: 40%;
display: block;
width: 32px;
height: 126px;
}
#fullsized_go_prev {
left: 0;
background: url('jquery-fullsizable.png');
}
#fullsized_go_prev:hover {
background-position: 0 -126px;
}
#fullsized_go_next {
right: 0;
background: url('jquery-fullsizable.png') -32px 0;
}
#fullsized_go_next:hover {
background-position: -32px -126px;
}
#fullsized_close, #fullsized_fullscreen {
position: absolute;
top: 10%;
display: block;
width: 32px;
height: 32px;
}
#fullsized_close {
top:5;
right: 0px;
background: url('jquery-fullsizable.png') -64px 0;
}
#fullsized_close:hover {
  background-position: -64px -32px;
}
#fullsized_fullscreen {
top:5;
right: 40px;
background: url('jquery-fullsizable.png') -96px 0;
}
#fullsized_fullscreen:hover {
background-position: -96px -32px;
}
:fullscreen #fullsized_fullscreen { background-position: -96px -64px; &:hover {background-position: -96px -96px;} }
:-webkit-full-screen #fullsized_fullscreen { background-position: -96px -64px; &:hover {background-position: -96px -96px;} }
:-moz-full-screen #fullsized_fullscreen { background-position: -96px -64px; &:hover {background-position: -96px -96px;} }

To be continued!

No comments:

Post a Comment