Grab a copy of the plugin <a href="http://matt.zurb.s3.amazonaws.com/orbit-1.2.3.zip" class="news_link" title="Orbit download">Orbit plugin 

here</a>. Update your page head section with the following lines specifying location of Orbit plugin files. 



<pre class="brush: xml">
&lt;script 
src="./orbit-1.2.3/jquery.orbit-1.2.3.min.js" type="text/javascript">
&lt;/script>
&lt;link rel="stylesheet" href="./orbit-1.2.3/orbit-1.2.3.css">&lt;/link>
</pre>




Note that we did not include JQuery because we are using the JQuery that comes built-in with PrimeFaces. 


<h3>
Activation code
</h3>


<pre class="brush: js;highlight:[4,8,9,10,11,16]">
&lt;script type="text/javascript">
 jQuery(window).load(function() {
 jQuery('#featured').orbit( {
 animation: 'horizontal-push',
 advanceSpeed: 15000,
 animationSpeed: 4000, 
 timer: true,
 directionalNav: true,
 bullets: false,
 bulletThumbs: false,
 bulletThumbLocation: '',
 pauseOnHover: true,
 startClockOnMouseOut: true,
 startClockOnMouseOutAfter: 1000,
 captions:true,
 captionAnimation: 'slideOpen', 
 captionAnimationSpeed: 1750,
 afterSlideChange: function(){}
 }
 );
 });
&lt;/script>
</pre>



Our Orbit plugin will be displayed with navigation controls without thumbnails (line 8) (we will explore thumbnails later in this blog). It is 

also created with a timer and timer animation graphic. Images will advance at advanceSpeed interval. Setting 

timer to false will cause image not to advance. Navigation will be manual. This activation code can be inserted in 

the head section of your page or in the body of the page. Note the we used an element ID featured for our plugin but you can 

choose element ID desired.



Value of animation in line 4 can be either fade, horizontal-slide, vertical-slide, or horizontal-push. 

captionAnimation in line 16 can be either fade, slideOpen, or none.



The CSS snippet below should also be modified to the width and height of your images. This is important so your galleria will have uniform sizes. 

 This snippet is located near the top of the Orbit's default CSS file.



<pre class="brush: css; hightlight:1">
#featured {
 width: 650px;
 height: 300px;
 background: #000 url('orbit/loading.gif') no-repeat center center;
 overflow: hidden; }
#featured>img,
#featured>div,
#featured>a { display: none; }
</pre>



<h3>
The markup that draws data from a backing bean
</h3>
Drawing data from backing beans is only an option, you can encode images data direct to the page if desired. See the Orbit documentation to see 

how the markup looks like without the backing bean code.



<pre class="brush: xml; highlight:[4,7,8,12,22]">
&lt;p:panel id="galleria-box" style="width:680px;" >

 &lt;div id="featured">
 &lt;ui:repeat var="pic" value="#{indexBean.galleriaImages}">
 &lt;img src="#{pic.image}" width="650" 
 height="300" alt="#{pic.content}"
 &lt;!-- data-thumb="#{pic.thumb}" -->
 data-caption="#htmlCaption#{pic.id}" />
 &lt;/ui:repeat>
 &lt;/div>
 &lt;ui:repeat var="pic" value="#{indexBean.galleriaImages}">
 &lt;span class="orbit-caption" id="htmlCaption#{pic.id}" >
 &lt;span class="my-orbit-caption">
 &lt;span class="my-orbit-caption2">
 &lt;a class="news_linkx" style="color:white;"
 href="/kauswagan/PictureBlogs.xhtml?b=#{pic.id}">
 #{pic.title}
 &lt;/a>
 &lt;/span>
 &nbsp;&nbsp;#{pic.content}
 
 &lt;/span>
 &lt;/ui:repeat>
&lt;/p:panel>

</pre>



We used the standard JSF ui:repeat tags. PrimeFaces p:dataGrid or its other data components will not work because of the several 

div wrappings it creates for those components that conflicts with Orbit's code.


Our container is PrimeFaces' p:panel component. You may want to further style this container. 



The value of data-caption attribute of the img tag is the ID of the element that takes of caption. The #htmlCaption#{pic.id} 

is just appending a counter to the word htmlCaption to make it unique. We set this as the ID of the span element in line 12. 


The entire line 12 to line 22 is our caption. There is no limit as to how large the caption is. The larger the caption the bigger the space it 

will take from the image. For a simple captions a single span will do the job.



Use standard backing bean method that returns objects of type List decribed in our markup above. Below is an example.



<pre class="brush: java">
public List getGalleriaImages () {

	// more
	List = new ArrayList ();
 
	int i=0;

	while (true) {

		// more

		myObjects obj = new myObjects ();
		obj.setId (""+i);
		list.add (obj);
		i++;

		// more

		if (if_all_is_done) {
			break;
		}
	}


 
	return list;
}
</pre>



<pre class="brush: java">
public class myObjects {
 private String id;
 private String thumb;
 private String content;
 
 public String getId () {
 return id;
 }

 public void setId (String s) {
 id=s;
 }

 // more
}
</pre>



<h3>
Navigation buttons
</h3>

Navigation is controlled by directionalNav in our activation code. If set to true directional navigation buttons 

will be shown. Depending on the size of your images, the default buttons may appear very large. Below is how to customize these buttons.


The CSS snippet that follow comes with Orbit plugin. Replace or resize (I used <a href="http://www.gimp.org/" target="_blank" class="news_link" 

title="Gimp download">gimp</a> to resize my images) the button graphic then change the width and height of the div.slider-span to match the size of your updated button images. Navigation buttons are placed in the left and right edges of your main images.



<pre class="brush: css; highlight:[2,3,12,16]">
div.slider-nav span {
 width: 39px;
 height: 50px;
 text-indent: -9999px;
 position: absolute;
 z-index: 1000;
 top: 50%;
 margin-top: -50px;
 cursor: pointer; }

div.slider-nav span.right {
 background: url(orbit/right-arrow.png);
 right: 0; }

div.slider-nav span.left {
 background: url(orbit/left-arrow.png);
 left: 0; }
</pre>



<h3>
Image Thumbnails
</h3>


To use image thumbnails, uncomment line number 8 of our markup and set bullets, bulletThumbs to true in line 9 and 10 of our 

activation code. Create your thumbnails and set the size of the thumbnails in the Orbit's CSS as below. bulletThumbLocation of our activation code can be set to an empty string if data-thumb of our markup is fully qualified. Thumbnails are located at the bottom of the galleria.



<pre class="brush: css">
.orbit-bullets li.has-thumb {
 background: none;
 width: 50px;
 height: 25px; }

</pre>



The above fragment is located near the bottom of Orbit's CSS file. 



For whatever reason that the PrimeFaces galleria component does not work for you, this an option worth considering.




That's it. Good luck.

Using and customizing Orbit image slider plugin for JSF/PrimeFaces pages