- 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.
- 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.
- 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 - Shown in the middle of the page
Content Slider - Example of the table that is used for content
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 - Additional debug information is available via the console, you will need firebug enabled to see the results.
- 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
- 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:
|<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 ----------
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.
- Original Content Slider code from Coin Slider