HTML Widget: How to Create a Content Slider

    Introduction

    Content Sliders aka "Image Sliders" are an easy way to condense alot of information into a graphical format that your users will enjoy viewing while getting a snippet of the content to read if interesting. The problem with most content sliders, is that you need to write html and embed it within your javascript code in order to have it display updates. This document attempts to show a technique for using a Jive Document to populate the contents of the content slider.

     

    Warnings

    • Please Note: This HTML widget is not optimized for high traffic sites. Images included within the content slider are not cached, as a result high traffic sites you may experience some performance issues. If you are using this widget on high traffic sites, I encourage you to not put it on the homepage.

     

    Updates

    • 6-10-2013 - Uploaded jive_6.0.1_content_slider.js which fixes several issues working on Jive 6.0.x and Jive cloud (version 7)
    • 10-3-2012 - Uploaded coin_slider_version_5.0.4_6.0.0.js which works in Jive 6 and should work with Jive 5.0.4.
    • 2-10-2012 - Uploaded new versions of the sliders to fix an issue with Jive 5 and IE 7 and IE 8 where the selector used to get the main body of the Jive Document was failing.

     

    Features

    • Condense information into 1 widget, with titles, captions, images, and a URL link
    • Slider controls for easy navigation
    • Update slides within the content slider via adding a table row to the rich text editor with a Jive Document
    • Code is contained within the HTML Widget, content is contained within a Jive Document
    • Easily configurable to use Jive thumbnails or the raw images for height/width

     

    content_slider_widget.png

    Content Slider - Shown in the middle of the page

     

    content_table.png

    Content Slider - Example of the table that is used for content

     

    content_slider_HTML_debug.png

    Content Slider - By default the code is put into debug mode, in debug mode you will see the HTML generated from the table, use this to verify that you have setup the content slider content table correctly

     

    content_slider_debug_mode.png

    Content Slider - Additional debug information is available via the console, you will need firebug enabled to see the results.

     

    Assumptions

    • This document assumes that you have permission to create HTML widgets within a group, project or community. You can follow the instructions for Embedded Javascript and HTML widgets in order to change your permissions.
    • This has been tested on Jive version 4.0.15 and Jive 5. Browsers tested on are IE7, IE8, Firefox 3.6, Safari, Chrome.
    • This widget is a bit complex to setup, but once you understand it, it will be easy to maintain.

     

    Steps to Configure for Your Site

    *Please do this in a test environment first and/or in a group/space that is not the homepage. Whenever you use javascript within HTML widgets you always run the risk of not being able to edit the dashboard layout due to conflicts.*

     

    Prerequisites:

    • You must create a document in a public container. The document must have a single table in it.
    • The table must have a header row, and content starts on Row number 2. You may have any number of content rows as you like. The format for the table is below:
    TitleCaptionImageURL
    <your title><your caption, no longer the 1 or 2 sentences><slide image uploaded here><the url you wish to link to>

     

    • In order to use this script, you must update the "HTML Widget Configuration", and enter the sourceURL for the document in which you created above. Example: /docs/DOC-52038
    • When you first use this script, its enabled in debug mode, its best if you use firefox, safari, or chrome to test initial configuration. Debug mode is enabled to help you ensure that you've setup the table, image width/height, and source document properly. See "Test the Content Slider Widget" section for more detail.

     

     

    Testing the Content Slider Widget

    If not configured properly this widget may cause an endless loop and/or make it impossible for you to edit your dashboard . For this reason I've enabled by default the widget to be in debug mode. Status of the code execution will display in a textarea field. Below is a snippet of what is displayed, you will want to make sure when your debugging that you see similar results.

     

    Content Slider: Content Page = /docs/DOC-3142
    Content Slider: Container Being Set to Width = 430px
    Content Slider: A table exists in the content!
    Content Slider: total number of table rows: 10
    ------- Begin For Iteration ----------
    Content Slider: current loop iteration: 1
    Content Slider: Row Title = New Title
    Content Slider: Row Caption = New Caption
    Content Slider: You selected useThumbImage as true rowImage value: <img src="http://lifelink.test.life/servlet/JiveServlet/downloadImage/102-3142-32-1263/450-337/100_3768.JPG" />
    Content Slider: Row URL = http://www.dailypaul.com
    ------- End For Iteration ----------
    
    
    
    
    

     

     

    Image Limitations

    There are two options for the images (use the image thumbnail generated by Jive, or use the inserted image native width/height). By setting useThumbImage to true, you will use the generated thumbnail from Jive. If you do this, you will need to make sure that the inserted image is at least as wide as the setting for "Maximum image width before forcing thumbnail view:" in the admin console --> system --> Settings --> Image configuration.

     

    For example: My instances force thumbnail setting is set to 450 within the admin console. Within the attached code, I've set the coin_container_width to 450 and the height to 230. So I want to make sure my images are at least 450px wide and at least 230px in height. Images with height and width greater then that will be scaled to fit within the container.

     

    Final Steps for Configuration

    • You must set the "enabled_coin_debug" to false after you verifying the table data is being pulled in by the widget.

     

    Acknowledgments