code.Atomic8Ball.com

Tabbed Slideshow Instructions

  1. Between the <head> & </head> tags add the following: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("#rotator").tabs({ fx: { opacity: "toggle"} }).tabs("rotate", 4000);
      });
    </script>
  2. 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!).
  3. 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.