<div class="image-200">
<img loading="lazy" src="https://cdn.kahimyang.com/resources/rhinoslider.webp"  alt="Rhinoslider demo" />
<div>
(Rhinoslider sample)
</div>
</div>
<p>
Listing 1 below, is a sample generated page.  Please make sure that items from 6 to 11 of the snippet are accessible from  the page itself.  These items are part of the plugin download.  If using PrimeFaces, you may want to remove lines 6 to 8.  Also lines 10 and 11 are optional and are controlled by the values of <i>"easing"</i> and <i>"controlsMousewheel"</i> parameters of the plugin (see Listing 7).
</p>
<p>
We will modify this page to run in JSF pages to take contents from a database source.  As a start, we added  <i>min-height</i> and <i>overflow: hidden</i> styles to <i>#slider</i> to prevent the images from "bleeding" while content is being loaded.  We also changed the size of the image to fit our requirements.
</p>
<h3>
The generated page
</h3>

<p>
<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>
</p>

<p>
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.
</p>

<h3>
JSF Page
</h3>

<p>
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.
</p>


<p>
<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>
</p>

<p>
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 <i>showCaptions</i> parameter (see Listing 7).  For styling parts of the plugin, <i>rhino-caption</i> and other pre defined classes are available.  Complete list can be found in their website. 
</p>

<p>
The corresponding bean of the markup of Listing 2 should look like below.  This is also a standard way to populate this component.
</p>

<p>
<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>
</p>


<p>
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. 
</p>


<p>
<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>
</p>


<p>
The corresponding bean of the markup above should look like below.  
</p>

<p>
<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>
</p>

<p>
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 <i>wmode</i> parameter other than <i>transparent</i>.  
</p>

<p>
<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>
</p>

<h3>
Javascript
</h3>
<p>
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.
</p>

<p>
<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>
</p>

<p>
Full list of plugin parameters is available from Rhinoslider website.
</p>
<p>
Change the &lt;style /> in Listing 1 to suit your requirements.
</p>

<p>
That's it Good Luck.
</p>

Using Rhinoslider with image and youtube content in JSF pages