jQuery in XPages – prettyPhoto – How does it work?

This article is written in support of the original jQuery in XPages #4 – prettyPhoto

Demonstration

To see the prettyPhoto plugin demonstrated in an XPage click on this link

Download

The sample database (as always from now on) is available from the link above and (here)

How does it work?

The plugin “.prettyPhoto()” acts on all elements which match the selector $(“a[rel^=’prettyPhoto’]”)

	$("a[rel^='prettyPhoto']").prettyPhoto();

The $(“a[rel^=’prettyPhoto’]”) selector translates to

  • For all the a tags (a)
  • get all those with the “rel” attribute
  • which starts with the word (^=) ‘prettyPhoto’

The following DOM elements would be selected

	<a href="/xomino/jQinX.nsf/1.jpg" rel="prettyPhoto[pp_gal]" title="Mark"></a>
	<a href="/xomino/jQinX.nsf/demos/xhr_response.html?open&amp;ajax=true" title="Ajax" rel="prettyPhoto[ajax]">Ajax</a>

but the following would not

<a href="1.jpg" rel="marky_prettyPhoto"></a>
<div rel="prettyPhoto" title="You can add caption to pictures.">Hi Mum</div>
  • in the first case prettyPhoto is not the start of the rel attribute,
  • in the second case it is not an anchor (A) tag but a div (div)

Adding prettyPhoto elements to the XPage

We need to add the “rel” attribute to an anchor tag (a link control) in our XPage and there are a number of ways we can achieve this. We can either:

1. Add the images to the database and reference them directly with HTML Directly in the XPage source

	<a title="You can add caption to pictures." href="images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]">
 <img src="images/thumbnails/t_1.jpg" alt="Red round shape" width="60" height="60" />
 </a>
	<a href="images/fullscreen/2.jpg" rel="prettyPhoto[pp_gal]">
 <img src="images/thumbnails/t_2.jpg" alt="Nice building" width="60" height="60" />
 </a>
	<a href="images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]">
 <img src="images/thumbnails/t_3.jpg" alt="Fire!" width="60" height="60" />
 </a>
	<a href="images/fullscreen/4.jpg" rel="prettyPhoto[pp_gal]">
 <img src="images/thumbnails/t_4.jpg" alt="Rock climbing" width="60" height="60" />
 </a>
	<a href="images/fullscreen/5.jpg" rel="prettyPhoto[pp_gal]">
 <img src="images/thumbnails/t_5.jpg" alt="Fly kite, fly!" width="60" height="60" />
 </a>

2. Add the images to the database and reference them using link controls in our XPage

	<xp:link escape="true" id="link4" value="images/fullscreen/3.jpg"
		title="Fire!">
		<xp:this.attrs>
			<xp:attr name="rel" value="prettyPhoto[pp_gal]"></xp:attr>
		</xp:this.attrs>
		<xp:image url="images/thumbnails/t_3.jpg" width="60" height="60"
			alt="Fire" id="image4">
		</xp:image>
	</xp:link>

Be aware that custom attributes cannot be added to the XPage Link control prior to 8.5.3

3. Add the images to documents within the database and reference them through a data source in a data table – and that is what we are going to show below…

Database Elements

The demonstration is made up of the following elements

  • XPages
    • The xPrettyPhoto container
  • CustomControls
    • The formPrettyPhoto (where the code lies)
  • JavaScript libraries
    • The jQuery library
    • The prettyPhoto Library
  • Form
    • The images form (data holder)
  • View
    • Images (data source)

The demonstration – Adding the images to a data source in the database

First of all we need to create a form which is going to hold the images

Creating the image upload form
Creating the image upload form

On the form we are going to create an image name, a RTF field to hold the attachment and a description field

Fields on the image form
Fields on the image form

Then we make our XPage and create a data source based on the imageHolder form

XPage data source
XPage data source

Dragging and dropping our data source onto the XPage creates out fields and add a File Upload control (which must be associated with the imageHolder field in the database source)

Fields on our XPage
Fields on our XPage

We add a submit button and reformatting the page a little creates out basic XPage

Basic Image Upload XPage
Basic Image Upload XPage

We need to create a view which shows our image name, description and the attachment name so that we can use them for reference.

Simple view

We will then create a repeat control on the page to display the thumbnail images

Adding a repeat control to the XPages
Adding a repeat control to the XPages

Inside the repeat control we are going to build our Anchor tags and Images.

To create the following HTML

	<a title="You can add caption to pictures." href="images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]">
 <img src="images/thumbnails/t_1.jpg" alt="Red round shape" width="60" height="60" />
 </a>

We need to need to get the href, title, alt and src tags from each document in the view.

So we add a data source to our repeat control

Assigning a data source to our repeat control
Assigning a data source to our repeat control

We then move to the XPage source to build our gallery HTML.

					<xp:repeat id="repeat1" rows="30"
						value="#{imagesView}" var="imageRepeat">

					<a href="??" rel="prettyPhoto[pp_gal]"
						title="??.">
						<img alt="??" height="60" src="??"
							width="60" style="padding: 5px"></img>
					</a>
					</xp:repeat>

and when we attach this to the repeat control data source (imagesRepeat) the code becomes:

					<xp:repeat id="repeat1" rows="30"
						value="#{imagesView}" var="imageRepeat">

					<a href="#{imageRepeat.imagePath}" rel="prettyPhoto[pp_gal]"
						title="#{imageRepeat.imageName}">
						<img alt="#{imageRepeat.imageDescription}" height="60" src="#{imageRepeat.imagePath}"
							width="60"  style="padding: 5px"></img>
					</a>

					 </xp:repeat>

and we have our gallery.

Image gallery
Image gallery

So now we have a basic functioning XPage which allows for the addition of images into a display gallery. To take it from here to the final product we need to add the prettyPhoto images/css and javascript libraries. The original prettyPhoto files are available here. I added the files to the WebContent by dragging and dropping them from my desktop.

I have added them to the WebContent folder which is accessible through the eclipse package explorer (Window/Show Eclipse Views/Package Explorer)

Adding prettyPhoto files to the WebContent folder int he database
Adding prettyPhoto files to the WebContent folder int he database

We then add the prettyPhoto.css,  jQuery and prettyPhoto javascript libraries to the XPage as a resource (I am referencing them here in the XPage source code)

	<xp:this.resources>
		<xp:script src="js/jquery-1.7.1.min.js" clientSide="true"></xp:script>
		<xp:script src="js/jquery.prettyPhoto.js" clientSide="true"></xp:script>
		<xp:styleSheet href="css/prettyPhoto.css"></xp:styleSheet>
	</xp:this.resources>

The final touch is to prettyPhoto-ify them by adding the activation code to a ScriptBlock at the end of the XPage

	$(document).ready(function(){
		  $("a[rel^='prettyPhoto']").prettyPhoto();
	});

And there we have it

The final prettyPhoto gallery
The final prettyPhoto gallery

There are more examples on the xomino demo website including prettyPhoto galleries containing:

  • iFrame content
  • youTube content
  • and even ajax content

Extra

The prettyPhoto library can also handle youtube/other videos by just making the a href link to a video link the prettyPhoto plugin is smart enough to pick it up and run with it.

Extra Extra

If you look into the prettyPhoto.js file you will see that there are LOTS of configurations which you can play with yourself to change the behavior of the plugin. Because of the following from the website “prettyPhoto is totally free to use, it is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones.” you can make any alterations you like.

	$.fn.prettyPhoto = function(pp_settings) {
		pp_settings = jQuery.extend({
			hook: 'rel', /* the attribute tag to use for prettyPhoto hooks. default: 'rel'. For HTML5, use "data-rel" or similar. */
			animation_speed: 'fast', /* fast/slow/normal */
			ajaxcallback: function() {},
			slideshow: 5000, /* false OR interval time in ms */
			autoplay_slideshow: false, /* true/false */
			opacity: 0.80, /* Value between 0 and 1 */
			show_title: true, /* true/false */
			allow_resize: true, /* Resize the photos bigger than viewport. true/false */
			allow_expand: true, /* Allow the user to expand a resized image. true/false */
			default_width: 500,
			default_height: 344,
			counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
			theme: 'pp_default', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
			horizontal_padding: 20, /* The padding on each side of the picture */
			hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */
			wmode: 'opaque', /* Set the flash wmode attribute */
			autoplay: true, /* Automatically start videos: True/False */
			modal: false, /* If set to true, only the close button will close the window */
			deeplinking: true, /* Allow prettyPhoto to update the url to enable deeplinking. */
			overlay_gallery: true, /* If set to true, a gallery will overlay the fullscreen image on mouse over */
			overlay_gallery_max: 30, /* Maximum number of pictures in the overlay gallery */
			keyboard_shortcuts: true, /* Set to false if you open forms inside prettyPhoto */
			changepicturecallback: function(){}, /* Called everytime an item is shown/changed */
			callback: function(){}, /* Called when prettyPhoto is closed */
			ie6_fallback: true,
			markup: '<div class="pp_pic_holder"> \
						<div class="ppt">&nbsp;</div> \
						<div class="pp_top"> \
							<div class="pp_left"></div> \
							<div class="pp_middle"></div> \
							<div class="pp_right"></div> \
						</div> \
						<div class="pp_content_container"> \
							<div class="pp_left"> \
							<div class="pp_right"> \
								<div class="pp_content"> \
									<div class="pp_loaderIcon"></div> \
									<div class="pp_fade"> \
										<a href="#" class="pp_expand" title="Expand the image">Expand</a> \
										<div class="pp_hoverContainer"> \
											<a class="pp_next" href="#">next</a> \
											<a class="pp_previous" href="#">previous</a> \
										</div> \
										<div id="pp_full_res"></div> \
										<div class="pp_details"> \
											<div class="pp_nav"> \
												<a href="#" class="pp_arrow_previous">Previous</a> \
												<p class="currentTextHolder">0/0</p> \
												<a href="#" class="pp_arrow_next">Next</a> \
											</div> \
											<p class="pp_description"></p> \
											<div class="pp_social">{pp_social}</div> \
											<a class="pp_close" href="#">Close</a> \
										</div> \
									</div> \
								</div> \
							</div> \
							</div> \
						</div> \
						<div class="pp_bottom"> \
							<div class="pp_left"></div> \
							<div class="pp_middle"></div> \
							<div class="pp_right"></div> \
						</div> \
					</div> \
					<div class="pp_overlay"></div>',
			gallery_markup: '<div class="pp_gallery"> \
								<a href="#" class="pp_arrow_previous">Previous</a> \
								<div> \
									<ul> \
										{gallery} \
									</ul> \
								</div> \
								<a href="#" class="pp_arrow_next">Next</a> \
							</div>',
			image_markup: '<img id="fullResImage" src="{path}" />',
			flash_markup: '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="{width}" height="{height}"><param name="wmode" value="{wmode}" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="{path}" /><embed src="{path}" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="{width}" height="{height}" wmode="{wmode}"></embed></object>',
			quicktime_markup: '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="{height}" width="{width}"><param name="src" value="{path}"><param name="autoplay" value="{autoplay}"><param name="type" value="video/quicktime"><embed src="{path}" height="{height}" width="{width}" autoplay="{autoplay}" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>',
			iframe_markup: '<iframe src ="{path}" width="{width}" height="{height}" frameborder="no"></iframe>',
			inline_markup: '<div class="pp_inline">{content}</div>',
			custom_markup: '',
			social_tools: '<div class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>' /* html or false to disable */
		}, pp_settings);

I hope that these examples are helpful and in general that the jQuery in XPages article series is enlightening and inspiring. There are so many different things we can easily incorporate into our XPages, the possibilities are endless 🙂

Demonstration

To see the prettyPhoto plugin demonstrated in an XPage click on this link

Stunning Firefox plugin – Tilt – 3D DOM visualizer – WOW !

WOW – I was looking around over the weekend and I found this STUNNING plugin – Tilt

Get the plugin here

It allows you to visualize the DOM in a 3D way so you can see the node containers from top to bottom. The possibilities are endless. it also allows you to visualize the STYLE sheets and DOM in a way firebug can only dream of….

WOW

OpenNTF as you never never seen it before
OpenNTF as you never never seen it before

 

Which comes from this

Tilting - OpenNTF
Tilting - OpenNTF

 

Here’s a video from the blog – still – WOW