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

Orbit image slider JQuery plugin comes with many customizable features. It looks and feels similar to PrimeFaces galleria component. We will explore most of these features for integration to your JSF pages and also for possible replacement or option to PrimeFaces galleria component. See our home page to demo what we describe in this blog.

Grab a copy of the plugin Orbit plugin here. Update your page head section with the following lines specifying location of Orbit plugin files.

<script 
src="./orbit-1.2.3/jquery.orbit-1.2.3.min.js" type="text/javascript">
</script>
<link rel="stylesheet" href="./orbit-1.2.3/orbit-1.2.3.css"></link>

Note that we did not include JQuery because we are using the JQuery that comes built-in with PrimeFaces.

Activation code

<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(){}
         }
     );
     });
</script>

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.

#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; }

The markup that draws data from a backing bean

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.

<p:panel id="galleria-box" style="width:680px;" >

        <div id="featured">
            <ui:repeat var="pic" value="#{indexBean.galleriaImages}">
                <img src="#{pic.image}" width="650" 
                     height="300" alt="#{pic.content}"
                     <!-- data-thumb="#{pic.thumb}" -->
                     data-caption="#htmlCaption#{pic.id}" />
            </ui:repeat>
        </div>
        <ui:repeat var="pic" value="#{indexBean.galleriaImages}">
            <span class="orbit-caption" id="htmlCaption#{pic.id}" >
                <span class="my-orbit-caption">
                    <span class="my-orbit-caption2">
                        <a class="news_linkx" style="color:white;"
                           href="/kauswagan/PictureBlogs.xhtml?b=#{pic.id}">
                              #{pic.title}
                        </a>
                    </span>
                      #{pic.content}
                
</span>
</ui:repeat>
</p:panel>

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.

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;
}

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
}

Navigation buttons

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

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; }

Image Thumbnails

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.

.orbit-bullets li.has-thumb {
    background: none;
    width: 50px;
    height: 25px; }

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.

If you like the article, please share.
(Site URL pattern has changed as a result social actions counter was reset.)



Comment icon   Comments (Newest first)