Friday, 29 May 2015

Using Unite Gallery in XPages - a highly customizable Responsive jQuery Gallery Plugin

In this blog post I will show how one of the most powerfull and highly customizable Responsive jQuery Image Gallery and Video Plugin can be used within XPages, the Unite Gallery. The Unite Gallery is multipurpose javascript gallery based on jquery library. It's built with a modular technique with a lot of accent of ease of use and customization. It's very easy to customize the gallery, changing it's skin via css, and even writing your own theme. Yet this gallery is very powerfull, fast and has the most of nowdays must have features like responsiveness, touch enabled and even zoom feature, it's unique effect.

Features:
  • The gallery plays VIDEO from: Youtube, Vimeo, HTML5, Wistia and SoundCloud (not a video but still )
  • Responsive - fits to every screen with automatic ratio preserve
  • Touch Enabled - Every gallery parts can be controlled by the touch on touch enabled devices
  • Responsive - The gallery can fit every screen size, and can respond to a screen size change.
  • Skinnable - Allow to change skin with ease in different css file without touching main gallery css.
  • Themable - The gallery has various of themes, each theme has it's own options and features, but it uses gallery core objects
  • Zoom Effect - The gallery has unique zoom effect that could be applied within buttons, mouse wheel or pinch gesture on touch - enabled devices
  • Gallery Buttons - The gallery has buttons on it, like full screen or play/pause that optimized for touch devidces access
  • Keyboard controls - The gallery could be controlled by keyboard (left, right arrows)
  • Tons of options. The gallery has huge amount of options for every gallery object that make the customization process easy and fun.
  • Powerfull API - using the gallery API you can integrate the gallery into your website behaviour and use it with another items like lightboxes etc.
To use the Bootstrap-modal plugin in XPages first we have to add the Unite Gallery files to the WebContent Folder in the Package Explorer. For this purpose I created a Folder 'unitegallery'.


Next we need to include  the js and css files on the XPage / Custom Control. In this example I include all files on an XPage. In the example below I use the Default Theme including some Gallery options.

<script type='text/javascript' src='unitegallery/js/unitegallery.min.js'></script>
<link rel='stylesheet' href='unitegallery/css/unite-gallery.css' type='text/css' />
<script type='text/javascript' src='unitegallery/themes/default/ug-theme-default.js'></script>
<link rel='stylesheet' href='unitegallery/themes/default/ug-theme-default.css' type='text/css' />

Furthermore we need the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin and include it on the Custom Control / XPage. You can add the XSnippet to the Script Libraries.


<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>

The script itself can be made up as follows. The name of the id in the script must correspond with the id of the gallery (<div id="gallery" style="display:none;">).

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$("#{id:gallery}").unitegallery({
slider_enable_arrows:true,
slider_enable_zoom_panel:true,
theme_enable_text_panel: false,
thumb_border_width:2,
thumb_over_border_width:2,
thumb_selected_border_width:4,
gallery_width:500,
gallery_height:500
});
}
);
]]></xp:this.value>
</xp:scriptBlock>

The last step is to create the gallery markup and adding the pictures to the gallery.

<div id="gallery" style="display:none;">
<img src="images/Photo1.jpg" data-image="images/Photo1.jpg"></img>
<img src="images/Photo2.jpg" data-image="images/Photo2.jpg"></img>
<img src="images/Photo3.jpg" data-image="images/Photo3.jpg"></img>
<img src="images/Photo4.jpg" data-image="images/Photo4.jpg"></img>
<img src="images/Photo5.jpg" data-image="images/Photo5.jpg"></img>
<img src="images/Photo6.jpg" data-image="images/Photo6.jpg"></img>
<img src="images/Photo7.jpg" data-image="images/Photo7.jpg"></img>
<img src="images/Photo8.jpg" data-image="images/Photo8.jpg"></img>
</div>

For the photos which should eventually be added to the gallery I created a folder 'images' in the WebContent folder in the Package Explorer.


Further I imported the photos which should be used in the galley into the newly created Folder 'ímages'.


The result is great and powerful responsive image Gallery.


It is also possible to add a video gallery in a simple manner.
First the Unite Gallery Video Theme Files needs to be added to the XPage / Custom Control. The next step is to include (one of) the video skins.

<script src='unitegallery/themes/video/ug-theme-video.js' type='text/javascript'></script>
<link  href='unitegallery/themes/video/skin-right-no-thumb.css' rel='stylesheet' type='text/css' />
<link  href='unitegallery/themes/video/skin-right-thumb.css' rel='stylesheet' type='text/css' />
<link  href='unitegallery/themes/video/skin-right-title-only.css' rel='stylesheet' type='text/css' />

Furthermore we need a second script to initialize the (video) plugin.

<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$("#{id:gallery2}").unitegallery({
gallery_theme: "video",
theme_autoplay: false,
theme_skin: "right-no-thumb",
gallery_width:800,
gallery_height:300
});
}
);
]]></xp:this.value>
</xp:scriptBlock>

The last step is to create the gallery markup and adding the videos to the gallery.

<div id="gallery2">
<div data-type="youtube"
data-videoid="SrQT443zfl0"
data-title="Smart Application Migration to XPages"
data-description="Oliver Busse">
</div>
<div data-type="youtube"
data-videoid="P24PsLXO5_o"
data-title="XPages Extension Library goes Responsive Part II"
data-description="David Leedy">
</div>
<div data-type="youtube"
data-videoid="Gwekie6M4WU"
data-title="Getting Started with Custom Renderers"
data-description="David Leedy - Oliver Busse">
</div>
<div data-type="youtube"
data-videoid="0_bBmwqzJyk"
data-title="Using jQuery DataTables in IBM XPages"
data-description="Oliver Busse">
</div>
<div data-type="youtube"
data-videoid="stJ3Yc1BOnU"
data-title="Getting Started with Servlets"
data-description="David Leedy">
</div>
</div>

The result is great responsive video Gallery.



Code XPages
<?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">
<!-- Include Unite Gallery core files -->
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type='text/javascript' src='unitegallery/js/unitegallery.min.js'></script>
<link rel='stylesheet' href='unitegallery/css/unite-gallery.css' type='text/css' />
<script type='text/javascript' src='unitegallery/themes/default/ug-theme-default.js'></script>
<link rel='stylesheet' href='unitegallery/themes/default/ug-theme-default.css' type='text/css' />
<script src='unitegallery/themes/video/ug-theme-video.js' type='text/javascript'></script>
<link  href='unitegallery/themes/video/skin-right-no-thumb.css' rel='stylesheet' type='text/css' />
<link  href='unitegallery/themes/video/skin-right-thumb.css' rel='stylesheet' type='text/css' />
<link  href='unitegallery/themes/video/skin-right-title-only.css' rel='stylesheet' type='text/css' />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$("#{id:gallery}").unitegallery({
slider_enable_arrows:true,
slider_enable_zoom_panel:true,
theme_enable_text_panel: false,
thumb_border_width:2,
thumb_over_border_width:2,
thumb_selected_border_width:4,
gallery_width:500,
gallery_height:500
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$("#{id:gallery2}").unitegallery({
gallery_theme: "video",
theme_autoplay: false,
theme_skin: "right-no-thumb",
gallery_width:800,
gallery_height:300
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div id="gallery" style="display:none;">
<img src="images/Photo1.jpg" data-image="images/Photo1.jpg"></img>
<img src="images/Photo2.jpg" data-image="images/Photo2.jpg"></img>
<img src="images/Photo3.jpg" data-image="images/Photo3.jpg"></img>
<img src="images/Photo4.jpg" data-image="images/Photo4.jpg"></img>
<img src="images/Photo5.jpg" data-image="images/Photo5.jpg"></img>
<img src="images/Photo6.jpg" data-image="images/Photo6.jpg"></img>
<img src="images/Photo7.jpg" data-image="images/Photo7.jpg"></img>
<img src="images/Photo8.jpg" data-image="images/Photo8.jpg"></img>
</div>
<br></br>
<div id="gallery2">
<div data-type="youtube"
data-videoid="SrQT443zfl0"
data-title="Smart Application Migration to XPages"
data-description="Oliver Busse">
</div>
<div data-type="youtube"
data-videoid="P24PsLXO5_o"
data-title="XPages Extension Library goes Responsive Part II"
data-description="David Leedy">
</div>
<div data-type="youtube"
data-videoid="Gwekie6M4WU"
data-title="Getting Started with Custom Renderers"
data-description="David Leedy - Oliver Busse">
</div>
<div data-type="youtube"
data-videoid="0_bBmwqzJyk"
data-title="Using jQuery DataTables in IBM XPages"
data-description="Oliver Busse">
</div>
<div data-type="youtube"
data-videoid="stJ3Yc1BOnU"
data-title="Getting Started with Servlets"
data-description="David Leedy">
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

For downwload and more information about themes and options : Unite Gallery documentation

1 comment:

  1. Hey Johnny,
    I tried using the unitegallery (carrousel) in an xpage. When I hardcode the images everything works fine. When I try to calculate the img tags with a repeat control, the images get a size of 0x0 pictures (natural 1575x1575 pixels) in chrome developer. So nothing is displayed. Any idea what can be wrong ?

    ReplyDelete