Friday, 9 October 2015

Using prettyPhoto A Powerful jQuery Lightbox Clone in XPages

In this final blog post on Image and Video Galleries in XPages I show how prettyPhoto can be used in XPages. prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox.
It is very easy to setup, yet very flexible if you want to customize it a bit. Plus the script is compatible in every major browser, even IE6. It also comes with useful APIs so prettyPhoto can be launched from nearly anywhere!
prettyPhot has been tested and is known to work in the following browsers: Firefox 3.0+, Google Chrome 10.0+, Internet Explorer 6.0+, Safari 3.1.1+ and Opera 9+.

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


Next the JavaScript and CSS files, jquery.prettyPhoto.js and prettyPhoto.css must be included on the XPage or Custom Control. In this example I add the files to an XPage.

<script type="text/javascript" src="prettyphoto/js/jquery.prettyPhoto.js"></script>
<link rel="stylesheet" href="prettyphoto/css/prettyPhoto.css" />

B. Setup Image Galley
The setup of the image gallery is quite simple in an XPage. Use the [pp_gal] addition to indicate that it is an image gallery and not a single image.

<div>
<a href="prettyphoto/images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]" title="Photo 1"><img src="prettyphoto/images/thumbnails/t_1.jpg" width="60" height="60" alt="Round shape" /></a>
<a href="prettyphoto/images/fullscreen/2.jpg" rel="prettyPhoto[pp_gal]"><img src="prettyphoto/images/thumbnails/t_2.jpg" width="60" height="60" alt="Building" /></a>
<a href="prettyphoto/images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]"><img src="prettyphoto/images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" /></a>
<a href="prettyphoto/images/fullscreen/4.jpg" rel="prettyPhoto[pp_gal]"><img src="prettyphoto/images/thumbnails/t_4.jpg" width="60" height="60" alt="Rock climbing" /></a>
<a href="prettyphoto/images/fullscreen/5.jpg" rel="prettyPhoto[pp_gal]"><img src="prettyphoto/images/thumbnails/t_5.jpg" width="60" height="60" alt="Fly!" /></a>
</div>

C.Initialize prettyPhoto
To initialize the prettyPhoto plugin use the following code. In the example below I've used the parameter 'social_tools: false' to remove the social buttons in the Lightbox (Facebook and Twitter). By setting the parameter to true however, they are shown.

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
social_tools: false
}
);
});
</script>

D. Final result in XPages
The final result is a great Image 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">
<script type="text/javascript" src="prettyphoto/js/jquery.prettyPhoto.js"></script>
<link rel="stylesheet" href="prettyphoto/css/prettyPhoto.css" />
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div>
<a href="prettyphoto/images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]" title="Photo 1"><img src="prettyphoto/images/thumbnails/t_1.jpg" width="60" height="60" alt="Round shape" /></a>
<a href="prettyphoto/images/fullscreen/2.jpg" rel="prettyPhoto[pp_gal]"><img src="prettyphoto/images/thumbnails/t_2.jpg" width="60" height="60" alt="Building" /></a>
<a href="prettyphoto/images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]"><img src="prettyphoto/images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" /></a>
<a href="prettyphoto/images/fullscreen/4.jpg" rel="prettyPhoto[pp_gal]"><img src="prettyphoto/images/thumbnails/t_4.jpg" width="60" height="60" alt="Rock climbing" /></a>
<a href="prettyphoto/images/fullscreen/5.jpg" rel="prettyPhoto[pp_gal]"><img src="prettyphoto/images/thumbnails/t_5.jpg" width="60" height="60" alt="Fly!" /></a>
</div>
<xp:br></xp:br>
<</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
<script type="text/javascript" charset="utf-8">
 $(document).ready(function(){
 $("a[rel^='prettyPhoto']").prettyPhoto({
 social_tools: false
 }
 );
});
</script>
</xp:view>

For more information: prettyPhoto documentation  and the blog post by Mark Roden jQuery in XPages #4 – prettyPhoto.

No comments:

Post a Comment