Image & content slider
HTML structure
The component displays slides that contain images or even full HTML content. The structure and content for the slider are defined as HTML <div> tags.
The main <div> tag will contain the slider. This must have a unique ID to identify the slider among the elements of the web page. The initialization function of the slider will be applied to the <div> with that unique ID.
<div id="mySliderID">
</div>
</div>
The slides are defined within a <div> tag with the name “jf-slider_content” which must be hidden so that its content will not be displayed.
<div id="mySliderID">
<div name="jf-slider_content" style="display: none;">
<div>
</div>
<div name="jf-slider_content" style="display: none;">
<div>
</div>
Each slide will be defined by its own <div> tag. This contains information about the type of the slide, title, description, content, target url and target window. The information for the slides is also specified through <div> tags, with the name attribute set to the type of information provided: jf-type, jf-title, jf-description, jf-content, jf-target_url, jf-target_window.
<div id="sliderID">
<div name="jf-slider_content" style="display: none">
<div name="jf-slide">
<div name="jf-type">image</div>
<div name="jf-title">Title</div>
<div name="jf-description">Description</div>
<div name="jf-content">images/image.jpg</div>
<div name="jf-target_url">http://www.somesite.com</div>
<div name="jf-target_window">_blank</div>
</div>
<div name="jf-slide">
<div name="jf-type">image</div>
<div name="jf-title">Title</div>
<div name="jf-description">Description</div>
<div name="jf-content">images/image2.jpg</div>
<div name="jf-target_url"></div>
<div name="jf-target_window"></div>
</div>
...
<div name="jf-slide">
<div name="jf-type">html</div>
<div name="jf-title"></div>
<div name="jf-description"></div>
<div name="jf-content">
<p>This is some HTML content for the slide.</p>
<br />
<img src="images/image.jpg" alt="Image" />
</div>
<div name="jf-target_url"></div>
<div name="jf-target_window"></div>
</div>
</div>
</div>
<div name="jf-slider_content" style="display: none">
<div name="jf-slide">
<div name="jf-type">image</div>
<div name="jf-title">Title</div>
<div name="jf-description">Description</div>
<div name="jf-content">images/image.jpg</div>
<div name="jf-target_url">http://www.somesite.com</div>
<div name="jf-target_window">_blank</div>
</div>
<div name="jf-slide">
<div name="jf-type">image</div>
<div name="jf-title">Title</div>
<div name="jf-description">Description</div>
<div name="jf-content">images/image2.jpg</div>
<div name="jf-target_url"></div>
<div name="jf-target_window"></div>
</div>
...
<div name="jf-slide">
<div name="jf-type">html</div>
<div name="jf-title"></div>
<div name="jf-description"></div>
<div name="jf-content">
<p>This is some HTML content for the slide.</p>
<br />
<img src="images/image.jpg" alt="Image" />
</div>
<div name="jf-target_url"></div>
<div name="jf-target_window"></div>
</div>
</div>
</div>
The slider component supports two types of content: image (for images) or html (for full HTML content). The content <div> tag can contain the URL of an image (if the type is set to image) or some HTML content (if the type is set to html). The HTML content is defined as usually with HTML tags and CSS styling.
Images can also be provided as HTML content, using the <img> tag within the content definition <div>, but in this case the type of the slide must be set to html.
The jf-target_url option is used to attach a URL to the slide so that when the user clicks on the slide, the target url will be opened automatically in a new browser window/tab. This only works for image slides and not html slides, that may require other type of interaction or may contain other links. On mobile devices by tapping on the surface of the slider, the specified url will be opened only if the controls are already displayed. If the autoHideControls property is set to true and the controls are hidden, the first tap will display the controls and the second tap will open the url.
Finally, the jf-target_window option will set the name of the window where the target url will be opened. By default, the jf-target_window option is set to _blank (if left empty) and the URL is opened in a new browser window or tab. But by specifying a different value, the URL can be opened in the same window or a specific frame. Possible values for this option are _blank, _parent, _self, _top and framename.
Notes:
- When embedding Adobe Flash content in a html type of slide we recommend using the wmode parameter set to transparent. Otherwise the Flash content will be displayed incorrectly above all the other HTML content.
<div name="jf-slide">
<div name="jf-type">html</div>
<div name="jf-title"></div>
<div name="jf-description"></div>
<div name="jf-content">
<div id="flashContent">
<object id="flash_banner" type="application/x-shockwave-flash" data="mybanner.swf" width="300" height="150">
<param name="movie" value="mybanner.swf" />
<param name="allowFullScreen" value="false" />
<param name="bgcolor" value="#FFFFFF" />
<param name="allowScriptAccess" value="always" />
<param name="wmode" value="transparent" />
</object>
</div>
</div>
<div name="jf-target_url"></div>
<div name="jf-target_window">_blank</div>
</div>
<div name="jf-type">html</div>
<div name="jf-title"></div>
<div name="jf-description"></div>
<div name="jf-content">
<div id="flashContent">
<object id="flash_banner" type="application/x-shockwave-flash" data="mybanner.swf" width="300" height="150">
<param name="movie" value="mybanner.swf" />
<param name="allowFullScreen" value="false" />
<param name="bgcolor" value="#FFFFFF" />
<param name="allowScriptAccess" value="always" />
<param name="wmode" value="transparent" />
</object>
</div>
</div>
<div name="jf-target_url"></div>
<div name="jf-target_window">_blank</div>
</div>
- Please take into consideration that if one of the HTML type of slides contains JavaScript code, that code will execute even if the slide is hidden. The best way to use JavaScript within your HTML slides is to define JavaScript functions for the slides and call those functions once that particular slide is displayed. This can be done by using the contentShow callback function and check whether the slide that has been displayed has the correct index. If the index of the displayed slide and the index of the slide containing your JavaScript functions match, then you can call those functions.
- You can use more than one content sliders on the same page, but each content slider must be added to its own container - a separate <div> tag with unique id attribute. Each slider will then have to be initialized using JavaScript and setting the appendToID parameter to the appropriate <div> tag id.