How to integrate SlidesJS into JSF2

SlidesJS is an image slider that is nice and easy to implement.
To implement SlidesJS into JSF2.x application, just need to download the required files and follow the steps below.

1. copy all the required files into resources folder.

2. include the following css into the target xhtml page or .css file

/* Prevents the slideshow from flashing on load */
#slides {
  display:none;
}
#slides .slidesjs-container {
  margin-bottom:10px;
}
#slides .slidesjs-previous {
  margin-right: 5px;
  float:left;
}
#slides .slidesjs-next {
  margin-right: 5px;
  float:left;
}
.slidesjs-pagination {
    margin:6px 0 0;
    float: right;
    list-style: none;
}
.slidesjs-pagination li {
    float: left;
    margin: 0 1px;
}
.slidesjs-pagination li a {
    display: block;
    width: 13px;
    height: 0;
    padding-top: 13px;
    background-image: url(/MY_APP_NAME/resources/jquery/slides/pagination.png);
    background-position: 0 0;
    float: left;
    overflow: hidden;
}
.slidesjs-pagination li a.active, .slidesjs-pagination li a:hover.active { background-position: 0 -13px; }
.slidesjs-pagination li a:hover { background-position: 0 -26px; }
#slides a:link, #slides a:visited { color: #333; }
#slides a:hover, #slides a:active { color: #9e2020; }

replace the MY_APP_NAME to the target JSF application name.

3. add the following line into the target xhtml

<h:outputScript library="jquery/slides" name="jquery.slides.js" />

4. add the following javascript into the target xhtml

  <script>
    $(function() {
      $('#slides').slidesjs({
        width: 940,
        height: 528,
        navigation: {
          effect: "fade"
        },
        pagination: {
          effect: "fade"
        },
        effect: {
          fade: {
            speed: 400
          }
        }
      });
    });
  </script>

5. add the following code block into the target xhtml

<div id="slides">

<img src="img/example-slide-350-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">

<img src="img/example-slide-350-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">

<img src="img/example-slide-350-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">

<img src="img/example-slide-350-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">

<a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a>

<a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a>

</div>

p/s: the red highlighted section can be replaced by any <img /> tag to display our desired pictures instead of the demo pictures.

reference: more jQuery image slider here.


Done!!