Friday, 1 May 2015

Using a responsive jQuery Gallery for images and videos in XPages

In one of my recent projects XPages one of the questions of the applicant was to implement a responsive image / video gallery. Hereby the possibility should consist to view the images / video 'full screen' as well as the ability to display thumbnails below the gallery. In this article I will give an example in which in a simple manner a responsive gallery can be added to an XPage / Custom Control. I use in this example Fotorama, a simple, stunning, but powerful jQuery gallery. To use Fotorama the files fotorama.css and fotorama.js need to be added to the XPage / Custom Control. Fotorama's CDN is provided by CDNJS which means that we can use the following "links".

<!-- fotorama.css & fotorama.js. -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.css" rel="stylesheet">
</link><!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.js"></script>
<!-- 16 KB -->

Another option is to download the Fotorama files and add the files to the WebContent folder in the Package Explorer.


<!-- fotorama.css & fotorama.js. -->
<xp:this.resources>
<xp:styleSheet href="/fotorama.css"></xp:styleSheet>
</xp:this.resources>
<script type="text/javascript" src="fotorama/fotorama.js"></script>

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'.



Setting up fotorama on an XPages / Custom Control is very simple. Fotorama initialized automatically in all the blocks with the fotorama class.

<div class="fotorama" ..... </div>

Fotorama’s dimensions are the dimensions of the first image (or column). Other pictures are scaled proportionally to fit. To reserve the space on the page before the first image is loaded, use data-width and data-height. But solely set a data-width and data-height makes the gallery NOT responsive! To make fotorama responsive, we have to define width in percents and aspect ratio.

<div class="fotorama"
     data-width="100%"
     data-ratio="800/600">
</div>

For customizing the basic settings of Fotorama I used the following data-attributes: data-nav for displaying the thumbnails, data-allowfullscreen for allowing Fotorama to enter fullscreen, data-arrows for controlling the way users interact with the Fotorama, data-width to make the gallery responsive and data-fit for stretching and cropping the image to completely cover the Fotorama. There are many other possibilities for adjusting the default settings.

<div class="col-md-7">
<div class="fotorama" data-nav="thumbs" data-allowfullscreen="true" data-arrows="true" data-click="true" data-swipe="false" data-width="100%" data-ratio="800/600">
<!-- ↑ The same as data-ratio="4/3" or data-ratio="1.3333333333". -->
<img src="images/Photo1.jpg" data-fit="cover"></img>
<img src="images/Photo2.jpg" data-fit="cover"></img>
<img src="images/Photo3.jpg" data-fit="cover"></img>
<img src="images/Photo4.jpg" data-fit="cover"></img>
<img src="images/Photo5.jpg" data-fit="cover"></img>
<img src="images/Photo6.jpg" data-fit="cover"></img>
<img src="images/Photo7.jpg" data-fit="cover"></img>
<img src="images/Photo8.jpg" data-fit="cover"></img>
</div>
</div>

The final result is a responsive image gallery with all the options as indicated by the applicant.


Fotorama can also be used for videos.
To add a video from YouTube or Vimeo just link to the video page. Fotorama will automatically fetch the splash images.

<h1>Video Gallery</h1>
<div class="fotorama">
<a href="https://vimeo.com/7863677">Omnia - Alive</a>
<a href="https://vimeo.com/50046920">Omnia - Dance Until We Die</a>
</div>

You can use the same data-attributes as for the image gallery.

<h1>Video Gallery</h1>
<div class="fotorama" data-nav="thumbs" data-fit="cover"
data-allowfullscreen="true" data-arrows="true" data-click="true"
data-swipe="false" data-width="100%" data-ratio="800/600">
<a href="https://vimeo.com/7863677">Omnia - Alive</a>
<a href="https://vimeo.com/50046920">Omnia - Dance Until We Die</a>
<a href="https://vimeo.com/61524508">Omnia - I don't speak Human</a>
<a href="https://vimeo.com/60063689">Omnia - Saltatio Vita</a>
<a href="https://vimeo.com/49597866">Omnia - Fee Ra Huri</a>
</div>

The final result is a responsive video gallery.

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">
<!-- fotorama.css & fotorama.js. -->
<link
href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.css"
rel="stylesheet">
</link><!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.js">
</script>
<!-- 16 KB -->
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="page-header">
<h1>A simple, stunning, powerful jQuery gallery</h1>
</div>
<div class="col-md-7">
<h1>Images Gallery</h1>
<div class="fotorama" data-nav="thumbs"
data-allowfullscreen="true" data-arrows="true" data-click="true"
data-swipe="false" data-width="100%" data-ratio="800/600">
<!-- ↑ The same as data-ratio="4/3" or data-ratio="1.3333333333". -->
<img src="images/Photo1.jpg" data-fit="cover"></img>
<img src="images/Photo2.jpg" data-fit="cover"></img>
<img src="images/Photo3.jpg" data-fit="cover"></img>
<img src="images/Photo4.jpg" data-fit="cover"></img>
<img src="images/Photo5.jpg" data-fit="cover"></img>
<img src="images/Photo6.jpg" data-fit="cover"></img>
<img src="images/Photo7.jpg" data-fit="cover"></img>
<img src="images/Photo8.jpg" data-fit="cover"></img>
</div>
</div>
<div class="col-md-7">
<h1>Video Gallery</h1>
<div class="fotorama" data-nav="thumbs" data-fit="cover"
data-allowfullscreen="true" data-arrows="true" data-click="true"
data-swipe="false" data-width="100%" data-ratio="800/600">
<a href="https://vimeo.com/7863677">Omnia - Alive</a>
<a href="https://vimeo.com/50046920">Omnia - Dance Until We Die</a>
<a href="https://vimeo.com/61524508">Omnia - I don't speak Human</a>
<a href="https://vimeo.com/60063689">Omnia - Saltatio Vita</a>
<a href="https://vimeo.com/49597866">Omnia - Fee Ra Huri</a>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

For download and other information: Fotorama - A simple, stunning, powerful jQuery gallery

No comments:

Post a Comment