code.Atomic8Ball.com

Tabbed Slideshow Instructions

  1. Confirm that jQuery (min 1.6) and jQueryUI (min 1.8) are present.
  2. Between the <head> & </head> tags add the following: type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("#rotator").tabs({ fx: { opacity: "toggle"} }).tabs("rotate", 4000);
      });
    </script>
  3. Add the following HTML where you would like your slideshow to appear: <div id="rotator">
      <ul class="ui-tabs-nav">
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><span>Tab 1</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><span>Tab 2</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><span>Tab 3</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><span>Tab 4</span></a></li>
      </ul>
      <div id="fragment-1" class="ui-tabs-panel">
        <h2>Tab 1</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius, elit
          mollis posuere tempor, libero elit porta ligula, vestibulum congue mi quam in nisi.
        </p>
      </div>
      <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
        <h2>Tab 2</h2>
        <p>
          Nam feugiat convallis leo a pellentesque. Nam commodo justo erat, at posuere turpis.
          Suspendisse auctor tempus posuere. Mauris a nisi mi, fermentum gravida lectus.</p>
      </div>
      <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
        <h2>Tab 3</h2>
        <p>
          Nunc tincidunt dapibus lorem, ut posuere risus bibendum eget. Proin sit amet nulla
          orci. Nulla tempor lacus vitae eros vehicula et euismod sem sodales.</p>
      </div>
      <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide">
        <h2>Tab 4</h2>
        <p>
          Mauris fermentum blandit ipsum scelerisque condimentum. Pellentesque vitae odio
          ut nunc consequat egestas at in quam. Mauris feugiat rutrum purus, vel tempus diam
          vulputate id.</p>
      </div>
    </div>

    Note:

    • The <ul> creates the tabs while the <div>s create the panels, these must have coordinating id and href tags as seen in the example.
    • <h2> & <p> are used in this example but any HTML can be used (including images or videos!).
  4. Add the CSS: #rotator
    {
        background: #FFF;
        color: #000;
        position: relative;
        padding-bottom: 2.6em;
        margin: 0;
        font-size: 16px;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        width: 768px;
        display: block;
        margin: 0 auto;
    }

    /* Tabs */
    ul.ui-tabs-nav, li.ui-tabs-nav-item, li.ui-tabs-nav-item a:link, li.ui-tabs-nav-item a:visited
    {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        line-height: 1.3;
        text-decoration: none;
        font-size: 100%;
        list-style: none;
        float: left;
        font-family: Arial, Helvetica, sans-serif;
    }
    ul.ui-tabs-nav
    {
        position: absolute;
        bottom: 0px;
        left: 0;
        z-index: 1;
        width: 100%;
        background: #fff;
        border-top: 1px solid #ccc;
    }

    /* Non-Selected Tabs */
    li.ui-tabs-nav-item a:link, li.ui-tabs-nav-item a:visited
    {
        font-size: .8em;
        font-weight: normal;
        color: #999;
        background: #ccc;
        border-left: 1px solid #FFF;
        border-right: 1px solid #c5ced9;
    }

    /* Hovered Tab */
    #rotator .ui-tabs-nav-item a:hover, #rotator .ui-tabs-nav-item a:active
    {
        background: #FFF;
        color: #333;
    }
    #rotator .ui-tabs-nav-item a span
    {
        float: left;
        padding: 1em;
        cursor: pointer;
    }
    /* Active Tab */
    #rotator .ui-tabs-selected a:link, #rotator .ui-tabs-selected a:visited, #rotator .ui-tabs-selected a:hover, #rotator .ui-tabs-selected a:active
    {
        background: #fff;
        color: #333;
    }

    /* Content Panels */
    #rotator .ui-tabs-panel
    {
        font-family: Arial, Helvetica, sans-serif;
        clear: left;
        color: #000;
        padding: 40px 340px 15px 15px;
        height: 225px;
    }
    #rotator .ui-tabs-hide
    {
        display: none;
    }

    /* Background Images */
    #rotator #fragment-1
    {
        background: Red;
    }
    #rotator #fragment-2
    {
        background: Orange;
    }
    #rotator #fragment-3
    {
        background: Yellow;
    }
    #rotator #fragment-4
    {
        background: Blue;
    }

    Note

    • This is some very basic styling as seen in the demo, get creative here and modify the format to fit the site you are working on.
Cal. Civ. Code ยง 1798.102 - Do Not Sell My Personal Information