In this blog post I show how the Carousel setup of the blueimp Gallery can be used in XPages. To display images in an inline carousel instead of a Lightbox, follow the Lightbox setup as described in my previous blog post, Using blueimp Gallery A Touch-Enabled, Responsive and Customizable Image and Video Gallery, Carousel and Lightbox in XPages, and add the CSS class blueimp-gallery-carousel to the Gallery widget and remove the child element with the close class or add a new Gallery widget with a different id to the XPage. In the example below I add the Carousel setup along with the Lightbox.
A. Carousel setup in XPages
The Gallery as inline Carousel can be positioned anywhere on the XPage.
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
B. Initialize the Carousel
To initialize the Carousel add the following JavaScript code after including the Gallery script.
<script>
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true
}
);
</script>
C. Keyboard shortcuts
The Gallery can be controlled with the following keyboard shortcuts:
Return: Toggle controls visibility.
Esc: Close the Gallery lightbox.
Space: Toggle the slideshow (play/pause).
Left: Move to the previous slide.
Right: Move to the next slide.
Important: Please note that setting the carousel option to true disables the keyboard shortcuts by default. If the carousel option is true the following options are set to different default values:
var carouselOptions = {
hidePageScrollbars: false,
toggleControlsOnReturn: false,
toggleSlideshowOnSpace: false,
enableKeyboardNavigation: false,
closeOnEscape: false,
closeOnSlideClick: false,
closeOnSwipeUpOrDown: false,
disableScroll: false,
startSlideshow: true
};
The options object passed to the Gallery function extends the default options and also those options set via Carousel mode.
D. Final result in XPages
The final result is a responsive, touch enabled inline carousel combined with a Lightbox.
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="blueimp/js/blueimp-gallery.js"></script>
<link rel="stylesheet" href="blueimp/css/blueimp-gallery.css" />
<link rel="stylesheet" href="blueimp/css/blueimp-gallery-indicator.css" />
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="col-sm-10">
<xp:br></xp:br>
<div id="links">
<a href="images/viewer1.jpg" title="Photo1">
<img src="images/thumbs/viewer1.jpg" alt="Photo1"></img>
</a>
<a href="images/viewer2.jpg" title="Photo2">
<img src="images/thumbs/viewer2.jpg" alt="Photo2"></img>
</a>
<a href="images/viewer3.jpg" title="Photo3">
<img src="images/thumbs/viewer3.jpg" alt="Photo3"></img>
</a>
</div>
<xp:br></xp:br>
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<xp:br></xp:br>
<!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
</div>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
<script>
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true,
hidePageScrollbars: false,
toggleControlsOnReturn: true,
toggleSlideshowOnSpace: true,
enableKeyboardNavigation: true,
closeOnEscape: false,
closeOnSlideClick: false,
closeOnSwipeUpOrDown: false,
disableScroll: true,
startSlideshow: true
}
);
</script>
</xp:view>