We will modify this page to run in JSF pages to take contents from a database source. As a start, we added min-height and overflow: hidden styles to #slider to prevent the images from "bleeding" while content is being loaded. We also changed the size of the image to fit our requirements.

<h3>
The generated page
</h3>


<pre class="brush: xml;highlight:[13,38,39,40,41,42]" title="Listing 1">
&lt;html>
 &lt;head>
 &lt;meta charset="utf-8">
 &lt;title>Rhinoslider 1.05&lt;/title>
 &lt;link type="text/css" rel="stylesheet" href="css/rhinoslider-1.05.css" />
 &lt;script type="text/javascript" 
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
 &lt;/script>
 &lt;script type="text/javascript" src="js/rhinoslider-1.05.min.js">&lt;/script>
 &lt;script type="text/javascript" src="js/mousewheel.js">&lt;/script>
 &lt;script type="text/javascript" src="js/easing.js">&lt;/script>
 
 &lt;script type="text/javascript">
 $(document).ready(function() {
 $('#slider').rhinoslider({
 showCaptions: 'always',
 slidePrevDirection: 'toBottom'
 });
 });
 &lt;/script> 
 &lt;style type="text/css">
 body { background-color:#000; }
 #slider {
 width:600px;
 height:250px;
 /*IE bugfix*/
 padding:0;
 margin:0;
 }
 #slider li { list-style:none; }
 #page {
 width:600px;
 margin:50px auto;
 }
 &lt;/style>
 &lt;/head>
 &lt;body>
 &lt;div id="page"> 
 &lt;ul id="slider">
 &lt;li>&lt;img src="img/slider/01.webp" alt="" />&lt;/li>
 &lt;li>&lt;img src="img/slider/02.webp" alt="" />&lt;/li>
 &lt;/ul>
 &lt;/div>
 &lt;/body>
&lt;/html>
</pre>



The actual plugin in line 38 above, uses &lt;ul /> and &lt;li /> set. This plugin though can also be built with &lt;div /> elements.


<h3>
JSF Page
</h3>


One option is to use &lt;ui:repeat /> component. This component does not work well with &lt;ul />, so we use &lt;div /> elements instead. See below.




<pre class="brush: xml" title="Listing 2">
&lt;h:panelGroup layout="block" id="slider">
 &lt;ui:repeat value="#{indexBean.gallery}" var="pic">
 &lt;div>
 &lt;img src="#{pic.thumb}" width="320" border="0" alt="" />
 &lt;div class="rhino-caption">
 &lt;h:outputText value="#{pic.title}" escape="false" />
 &lt;/div>
 &lt;/div>
 &lt;/ui:repeat>
&lt;/h:panelGroup>
</pre>



This is a standard use of this component. In line 5 above, captions are added through a &lt;div /> with rhino-caption class, it can also be the title attribute of &lt;img />. Its visibility behaviour is controlled by showCaptions parameter (see Listing 7). For styling parts of the plugin, rhino-caption and other pre defined classes are available. Complete list can be found in their website. 



The corresponding bean of the markup of Listing 2 should look like below. This is also a standard way to populate this component.



<pre class="brush: java" title="Listing 3">
private List &lt;Gallery> images;

public List&lt;Gallery>getGallery () {
 if (image == null) {
 images = galleria (); 
 }
 return images;
}

private List&lt;Gallery> galleria() {

 List&lt;Gallery> list = new ArrayList<>();

 StringBuilder sql = new StringBuilder("select ");
 sql.append("f_id ....");

 try (
 // Replace with how you connect to database
 Connection conn = DatasourceConnection.getConnection();
 Statement stmt = conn.createStatement();
 ResultSet set = stmt.executeQuery(sql.toString())) {
 
 while (set.next()) {
 Gallery obj = new Gallery();
 obj.setId(set.getString(1));
 // Code removed for clarity
 list.add(obj); 
 }
 } catch (Exception e) {
 // log
 }

 return list;
}

public static class Gallery {

 Gallery() {
 }

 private String id;
 private String title;
 private String description;
 private String thumb;
 private String picture;

 public String getId() {
 return id;
 }

 public void setId(String s) {
 id = s;
 }
 // Other getters and setters
}
</pre>




The other option is through a non escaped &lt;h:outputText /> whose value is the plugin and the entire elements contained in it, all built from the bean. 




<pre class="brush: xml" title="Listing 4">
&lt;h:panelGroup layout="block" style="background-color:#222;">
 &lt;h:outputText rendered="true" value="#{indexBean.sliderContent}" 
 escape="false" />
&lt;/h:panelGroup>
</pre>




The corresponding bean of the markup above should look like below. 



<pre class="brush: java" title="Listing 5">
private String content;

public String getSliderContent () {
 if (content == null) {
 content = galleria ();
 }
 return content;
}

private String galleria() {

 StringBuilder sql = new StringBuilder("select ");
 sql.append("f_id ....");
 
 StringBuilder markup = new StringBuilder();

 try (
 // Change the way you connect to database
 Connection conn = DatasourceConnection.getConnection();
 Statement stmt = conn.createStatement();
 ResultSet set = stmt.executeQuery(sql.toString())) {
 
 markup.append("<div id='page'>");
 markup.append ("<ul id='slider'>"); // can be a &lt;div />

 while (set.next()) {

 markup.append("<li>"); // can be a &lt;div />
 
 // This is a field which classify the record 1 being a video record
 if (set.getInt(6) == 0) {
 // Build the &lt;img /> tag
 } else {
 // Build video content in an &lt;iframe /> form. 
 // See &lt;iframe /> details in listing 5 below.
 }
 // add caption if desired 

 markup.append("</li>");
 }

 markup.append("</ul>");
 markup.append("</div>");

 } catch (Exception e) {
 // log
 }

 return markup.toString ();
}
</pre>



The above snippet assemble the plugin with &lt;ul /> and &lt;li /> set but &lt;div /> elements should also work. The video content in line 33 above should take the following format. Note that Rhinoslider does not work well with wmode parameter other than transparent. 



<pre class="brush: xml" title="Listing 5">
&lt;iframe class="tubeFrame" width="320" height="240" 
 src="http://www.youtube.com/embed/7ZegGJQ6gm8?rel=0&showinfo=0&wmode=transparent" 
 frameborder="0">
 &lt;/iframe>
</pre>


<h3>
Javascript
</h3>

Create the plugin with the following Javascript call.&nbsp;&nbsp;This snippet along with loading jQuery and other scripts required by the plugin, can be placed either in the &lt;head /> or just before the &lt;/body> tag. This replaces line 13 in Listing 1.



<pre class="brush: xml" title="Listing 7">
&lt;script>
 $(function() {

 $('#slider').rhinoslider({
 showCaptions: 'always',
 autoPlay: false,
 captionsOpacity: 0.5,
 pauseOnHover: true,
 showTime: 15000,
 controlsPlayPause: true,
 showControls: "always",
 randomOrder: false,
 changeBullets: "before",
 showBullets: "hover",
 controlsMousewheel: true,
 easing: "slide",
 slidePrevDirection: 'toBottom',
 callBeforeNext: function() {
 reset_v_source($('#slider').find('li.rhino-active').find(".tubeFrame"));
 },
 callBeforePrev: function() {
 reset_v_source($('#slider').find('li.rhino-active').find(".tubeFrame"));
 }
 });
 });

 function reset_v_source(source) {
 /*
 * Stop video by resetting source
 */
 if (source !== 'undefined') {
 var s = $(source).attr("src");
 $(source).attr("src", "");
 $(source).attr("src", s);
 }
 }

&lt;/script>
</pre>



Full list of plugin parameters is available from Rhinoslider website.


Change the &lt;style /> in Listing 1 to suit your requirements.



That's it Good Luck.