Using Rhinoslider with image and youtube content in JSF pages
|
|
| Rhinoslider sample. |
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 "easing" and "controlsMousewheel" parameters of the plugin (see Listing 7).
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.
The generated page
<html>
<head>
<meta charset="utf-8">
<title>Rhinoslider 1.05</title>
<link type="text/css" rel="stylesheet" href="css/rhinoslider-1.05.css" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>
<script type="text/javascript" src="js/rhinoslider-1.05.min.js"></script>
<script type="text/javascript" src="js/mousewheel.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').rhinoslider({
showCaptions: 'always',
slidePrevDirection: 'toBottom'
});
});
</script>
<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;
}
</style>
</head>
<body>
<div id="page">
<ul id="slider">
<li><img src="img/slider/01.jpg" alt="" /></li>
<li><img src="img/slider/02.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>
The actual plugin in line 38 above, uses <ul /> and <li /> set. This plugin though can also be built with <div /> elements.
JSF Page
One option is to use <ui:repeat /> component. This component does not work well with <ul />, so we use <div /> elements instead. See below.
<h:panelGroup layout="block" id="slider">
<ui:repeat value="#{indexBean.gallery}" var="pic">
<div>
<img src="#{pic.thumb}" width="320" border="0" alt="" />
<div class="rhino-caption">
<h:outputText value="#{pic.title}" escape="false" />
</div>
</div>
</ui:repeat>
</h:panelGroup>
This is a standard use of this component. In line 5 above, captions are added through a <div /> with rhino-caption class, it can also be the title attribute of <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.
private List <Gallery> images;
public List<Gallery>getGallery () {
if (image == null) {
images = galleria ();
}
return images;
}
private List<Gallery> galleria() {
List<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
}
The other option is through a non escaped <h:outputText /> whose value is the plugin and the entire elements contained in it, all built from the bean.
<h:panelGroup layout="block" style="background-color:#222;">
<h:outputText rendered="true" value="#{indexBean.sliderContent}"
escape="false" />
</h:panelGroup>
The corresponding bean of the markup above should look like below.
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("");
markup.append (""); // can be a <div />
while (set.next()) {
markup.append("- "); // can be a <div />
// This is a field which classify the record 1 being a video record
if (set.getInt(6) == 0) {
// Build the <img /> tag
} else {
// Build video content in an <iframe /> form.
// See <iframe /> details in listing 5 below.
}
// add caption if desired
markup.append("
");
}
markup.append("
");
markup.append("");
} catch (Exception e) {
// log
}
return markup.toString ();
}
The above snippet assemble the plugin with <ul /> and <li /> set but <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.
<iframe class="tubeFrame" width="320" height="240"
src="http://www.youtube.com/embed/7ZegGJQ6gm8?rel=0&showinfo=0&wmode=transparent"
frameborder="0">
</iframe>
Javascript
Create the plugin with the following Javascript call. This snippet along with loading jQuery and other scripts required by the plugin, can be placed either in the <head /> or just before the </body> tag. This replaces line 13 in Listing 1.
<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);
}
}
</script>
Full list of plugin parameters is available from Rhinoslider website.
Change the <style /> in Listing 1 to suit your requirements.
That's it Good Luck.
(Using Rhinoslider with image and youtube content in JSF pages)
January
