jQuery in XPages #5 – jQueryUI (Accordion) – How does it work?

In this article I will show you how to add a jQueryUI accordion to your XPage as a menu.

Demonstration site

This article is published in conjunction with the original post and the demonstration site

Download

The sample database is available from the link above and (here)

Rolling my theme

Using the jQueryUI themeroller I modified the darkness ui theme to match the colors used by the oneui2.1_onyx CSS which the site now uses

Marky's Rolled theme

Once complete I downloaded the theme via the download builder. I included everything in the download because if I use jQueryUI at a later date I don’t want to have to go through this again – it is a demo site after all and page load time is not on my list of priorities (or I am lazy).

Being serious for a moment:

If you are going to use only one of the capabilities included in the builder for production you should remove everything else. The difference can be as much as over 150k and that will make a huge difference in pageload time.

The download

The contents of the jquery-ui-1.8.18.custom.zip are the necessary javascript and css files to create the visual effect and stylize the webpage. The folder content must be maintained with the structure and the css files refer to the images within the folder structure. You can change this at your own risk but I strongly suggest you don’t. The contents of the folder are as follows:

  • js folder
    • jquery-ui-1.8.18.custom.min.js
    • jquery-1.7.1.min.js
  • css
    • custom-theme
      • jquery-ui-1.8.18.custom.css
      • images
        • 14 images supporting the style

Adding the files to your database

The js file and the css file should be dragged and dropping into the WebContent folder of your database. Visible from the package explorer view of your database.

Adding the jQuerUI files to your database WebContent folder
Adding the jQuerUI files to your database WebContent folder

Adding the file references to your XPage

Within my demo database I have a commonContainer Custom Control that controls my look and feel. I am going to add the file references to that custom control in the following manner. In the source panel at the top of the page I add a reference to each of the necessary js and css files (the paths are relative the XPage)


Adding the Accordion to the menu

Currently the menu is created using this XML markup

<ul>
	<li><strong>#1 High Charts</strong></li>
	<li></li>
	<li></li>
	<li>
</li>
</ul>
etc etc.........

which generates the following HTML when viewed through the webpage

<div class="lotusMenu">
<div class="lotusBottomCorner">
<div class="lotusInner">
<ul>
	<li><a id="view:_id1:_id2:link9" class="xspLink" href="SampleDB/jQInX.zip">Download the Sample DB</a></li>
</ul>
<ul>
	<li><strong>#1 High Charts</strong></li>
	<li><a id="view:_id1:_id2:link1" class="xspLink" href="/xomino/jQinX.nsf/xFruit_Data.xsp">Binding to a Data Table</a></li>
	<li><a id="view:_id1:_id2:link2" class="xspLink" href="/xomino/jQinX.nsf/xFruit.xsp">Binding to a View Panel</a></li>
	<li><a id="view:_id1:_id2:link3" class="xspLink" href="http://www.highcharts.com/demo" target="_blank">Highcharts.com Demos</a></li>
</ul>
<ul>
	<li><strong>#2 Labelify</strong></li>
	<li><a id="view:_id1:_id2:link4" class="xspLink" href="/xomino/jQinX.nsf/xLabelify.xsp">Visual Field Enhancement</a></li>
</ul>
 etc.....</div>

looking at the jQueryUI Accordion example page the menu is created from HTML looking like this….

<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</div>
<h3><a href="#">Section 2</a></h3>
<div>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</div>
</div>

The critical thing to grasp is that the HTML for each part of the must eventually look like this

<h3><a href="#">Section 1</a></h3>
<div>Text of the link - can be HTML here</div>

And my menu currently does not – time for some basic re-coding. Not hard just tedious (and like the good programmer I am – I am so glad I planned out the website before I started coding it) (*coughs politely*) As this menu is going to grow each week (I assume) it would be foolish to hard code it every week – so I am going to create some documents to represent the menu items and using a Repeat Control I am going to display the documents as HTML to build the Accordion.

Creating the Menu documents

I am going to use a “menu” form to create the documents (not worth an XPage as I am doing this through the client on the back end), and a vwMenu view. The form is very basic (like I said – this is back end only for me, not a production-worthy creation).

Simple menu creation form
Simple menu creation form

The view is categorized with the HTML I am going to need already written into the view columns. Because some of the links are to external websites we have to make a check and if so include the whole URL and not a relative one to the XPage

vwMenu Columns

To generate the HTML for the menu I used a repeat control – I use the repeat control to @DbColumn() the first column of vwMenu and then for each value in that list I am @DbLookup() the values in the 2nd column.

I was doing this with a computed text field and that initially caused me a problem. As you can see from the image below there is a lot more HTML generated that I need for the accordion…..there are way too many SPANS and DIVS

<span class="xspTextComputedField">
</span>
<h3><a href="#">#1 HighCharts</a></h3>
<div>
<a href="/xomino/jQinX.nsf/xFruit_Data.xsp">Binding to a Data Table</a>

<a href="/xomino/jQinX.nsf/xFruit.xsp">Binding to a View Panel</a>

<a href="http://www.highcharts.com/demo">Highcharts.com</a></div>
<span class="xspTextComputedField">
</span><span class="xspTextComputedField">
</span>
<h3><a href="#">#2 Labelify</a></h3>
<div>
<a href="/xomino/jQinX.nsf/xLabelify.xsp">Visual Field Enhancement</a></div>
<span class="xspTextComputedField">
</span><span class="xspTextComputedField">
</span>
<h3><a href="#">#3 Masked Input</a></h3>
<div>
<a href="/xomino/jQinX.nsf/xMaskedInput.xsp">Visual Field Enhancement</a></div>
<span class="xspTextComputedField">
</span><span class="xspTextComputedField">
</span>
<h3><a href="#">#4 prettyPhoto</a></h3>
<div>
<a href="/xomino/jQinX.nsf/xPrettyPhoto.xsp">A lighbox</a></div>
<span class="xspTextComputedField">
</span><span class="xspTextComputedField">
</span>
<h3><a href="#">#5 jQueryUI</a></h3>
<div>
<a href="http://jqueryui.com/demos/accordion/#collapsible">jQueryUI.com accordion</a></div>
<span class="xspTextComputedField">
</span>

This would not work for the accordion which needs a very specific format to work – so thanks to Mark Leusink – I have a new XPages *Best Friend Forever* – disableTheme=”true”.

To remove the <span id=”blah” and return to the HTML I really want from the view there are two steps:

  1. Remove the id from the field
  2. In the All Properties tab select disabledTheme=true
remove the id and select disableTheme=true
remove the id and select disableTheme=true

And this gives us the final code to make the menu


								<![CDATA[#{javascript:@DbColumn(@DbName(), "vwMenu", 1)}]]>

									<![CDATA[#{javascript:
										var temp = vwMenuCol1Repeat;
										var temp1 = "
<h3><a href=\"#\">"+temp+"</a></h3>
"
										temp1+"
<div>"+@Implode(@DbLookup(@DbName(), "vwMenu", temp, 2))+"</div>
"
									}]]>

I added a DIV wrapper to the Menu HTML so that the jQuery function would have an object I could select on. The selector uses [id$=menuContainer] rather than my x$ function just for variety. [id$=] selects all elements which finish with menuContainer. Activating the accordion plugin inside of a scriptblock at the bottom of the page completes the menu code.


									<![CDATA[ 									$(function() { 										$( "[id$=menuContainer]" ).accordion({ 											collapsible: true} 										}); 									}); 								]]>

and we have a menu……with two remaining issues……

  1. The links are black – being inherited from the lotusui class in the Oneui stylesheet
  2. The 1st Highcharts panel always opens (not the section we clicked on)

To remove the black links we add a style to the control to override the oneUI black links

 .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
 color: #FFFFFF !important;
 }
 .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
 color: #FFFFFF !important;
 }
 .lotusMenu h3 {line-height: 0.3}
 

To overcome the panel not opening as a user would expect it, we are going to use a scoped Variable, scoped only to this page. We are going to set the menuOpen viewScope variable in the preloading of the page – in this case

	<![CDATA[#{javascript:viewScope.menuOpen=3}]]>

and activate the panel with the scoped variable in the accordion build code – active: #{viewScope.menuOpen}.


									<![CDATA[ 									$(function() { 										$( "[id$=menuContainer]" ).accordion({ 											collapsible: true, 											active: #{viewScope.menuOpen} 										}); 									}); 								]]>

and we have a new menu 🙂

The accordion menu

Demonstration site

This article is published in conjunction with the original post and  demonstration site

PS

I know I am going to run out of space on this accordion menu within 10 articles or so – an excuse for a new article? 😉

Advertisements

XPages CSJS timing issue – what is ‘this’ ?

Problem

The JavaScript object represented by ‘this’ does not appear to be as expected.

The problem is caused because of the way that XPages adds events to DOM objects through the <xp:eventHandler>

The Situation

I wanted to pass the id from a button to a function. Outside of XPages I would normally acheive this by passing a reference to the button(this) to a function (saySomething in this case) and then extracting the id from the object passed:

function saySomething(obj){
	alert("This is my object - "+this
		+"nnThis is my id - "+
		this.id)
}
Describing 'this' when passed from a button to a function
Describing ‘this’ when passed from a button to a function
	<button id="markyButton" onclick="saySomething(this)"></button>

In this case I am passing the “this” object to the function.

this

is an object reference to the DOM element which it was generated from – for some serious stuff on ‘this’ check out this article

http://www.quirksmode.org/js/this.html

XPages fail 😦

However when I add the JavaScript to the XPages button and add the code through the GUI Designer interface

Adding JavaScript through the XPages GUI
Adding JavaScript through the XPages GUI

I do not get the expected result when I click on the button……

Not what we expected
Not what we expected

The Explanation…

The reason this happens is because of the way that XPages assigns events to objects in the webpage. If you have ever looked at the source of an XPages you will almost certainly have seen a whole load code like this at the end of the page

XSP.addOnLoad(function() {
XSP.attachEvent(".....
}

and this is how the XPage adds the event to the object – in the case of this example the XPages creates our button in the HTML but as you can see there is no onclick event initially assigned to it

		<button class="lotusBtn" type="button" name="view:_id1:_id2:_id37:button1" id="view:_id1:_id2:_id37:button1">Click This</button>

and then at the bottom of the web page source code we can see the assignment of the event after during the “addOnLoad” which means after the page has loaded.

<script type="text/javascript">

function view__id1__id2__id37__id40_clientSide_onclick(thisEvent) {
alert("This is my object - "+this+"nnThis is my id - "+this.id)

}

XSP.addOnLoad(function() {
XSP.attachEvent("view:_id1:_id2:_id37:_id40", "view:_id1:_id2:_id37:button1", "onclick", view__id1__id2__id37__id40_clientSide_onclick, false, 2);
});

</script>

What is happening?

The XPage is adding the function “view__id1__id2__id37__id40_clientSide_onclick” to the “onclick” event of the “view:_id1:_id2:_id37:button1” DOM element (our button in this case).

The nuances of this are subtle but important – the code is not adding “alert(whetever)” to the onclick event it is adding a function call to the onclick event.

So. when the button is clicked the function view__id1__id2__id37__id40_clientSide_onclick executes it’s code and in that situation ‘this’ no longer refers to the button.

The difference is clear when we look at the resulting code side by side

<button value="or Click this" id="button3" onclick='alert("This is my object - "+this+"nnThis is my id - "+this.id)'></button>

or

<button value="or Click this" id="button3" onclick='view__id1__id2__id37__id40_clientSide_onclick()'></button>

“this” is never passed to the view__id1__id2__id37__id40_clientSide_onclick() function and therefore any reference to the button is lost.

When the function executes – “this” refers to the function (which isn’t an object) and therefore we get the window (the webpage) as a failover.

The solution

If you need to do something like this then add the onclick event to the source pane.

Here is the XML markup for the XPages generated event (which fails me)

		<xp:button value="Click This" id="button1">
			<xp:eventHandler event="onclick" submit="false">
				<xp:this.script>
					<![CDATA[alert("This is my object - "+this+"\nThis is my id - "+this.id)]]>
				</xp:this.script>
			</xp:eventHandler>
		</xp:button>

and the XML markup  for the manually added onclick event (which works)

		<xp:button value="or Click this" id="button2"
			onclick='alert("This is my object - "+this+"\nThis is my id - "+this.id)'>
		</xp:button>

The demonstration

Here is a simple demo of the problem and the solution

jQuery in XPages #4 – prettyPhoto

This week we are going to look at a lightbox. A lightbox is a capability whereby the user clicks on a thumbnail image and the full size image is displayed on the screen. There are many of them, but I chose prettyPhoto because it also includes videos and flash plugins which makes it more flexible. So here goes….

prettyPhoto

prettyPhoto provides the developer an easy way to create a powerful visual effect on the webpage, whereby the user is able to view a slideshow of images.

A user sees a group of thumbnails

A group of thumbnails
A group of thumbnails

and is able to interact with them like this

Using prettyPhoto you can also embed a youtube video effectively within your page without it taking up real-estate

prettyPhoto is very easy to use within your XPages – this example uses 8.5.3 attributes for the links but you can actually achive this effect by just pasting the HTML into your XPages source.

To see how the effect is created check out the How does this work article…. 🙂

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