Notes

Click on any icon on the left to navigate between the pages.

Statistics

Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst.

Help

Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.



How to adapt


To add this widged to the page, add a division
<div class="wg-contentSlider" id="a-0">
and get jquery to transform that content into an interactive.
jQuery(".wg-contentSlider#a-0").wgContentSlider();

The text should be specified as a list of panels. You can add any content in each panel.
<div class="panel">
... your content
</div>
<div class="panel">
... your content
</div>
<div class="panel">
... your content
</div>

Icons and style are assigned by default. You can overwite them by editing the script options. Only icons can be changed for now.
styles: [
    { icon: 'assets/pen.png' },
    { icon: 'assets/graph.png' },
    { icon: 'assets/help.png'}
 ]

Code:
<!-- widged : start -->
<div class="wg-contentSlider">
<div class="panel">
<h2>Notes</h2>
<p>Click on any icon on the left to navigate between the pages.</p>
</div>
<div class="panel">
<h2>Statistics</h2>
<p>Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst.</p>
</div>
<div class="panel">
<h2>Help</h2>
<p>Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>
</div>
</div>
<!-- widged: end -->

<!-- Code : Start-->
<script type="text/javascript" src="http://widged.com/widgeds/js/jquery.scrollto.js">
</script><script type="text/javascript" src="http://widged.com/widgeds/js/jquery.contentSlider.js">
</script><script language="JavaScript" type="text/javascript">
  //<![CDATA[
  <!--
    jQuery(".wg-contentSlider").wgContentSlider({
       styles: [
          { icon: 'file/view/pen.png' },
          { icon: 'file/view/graph.png' },
          { icon: 'file/view/help.png' }
       ]
    });
  //-->
  //]]>
</script>
<!-- Code : End-->