Carousel Widget: Image and Text Example

Using the Carousel Widget for displaying items with images and text

This example has the following dependencies:

<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.5.2/build/carousel/assets/skins/sam/carousel.css">
<script src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/animation/animation-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/carousel/carousel-beta-min.js"></script>

This example uses progressive enhancement. So, the Carousel is created from an "ordered" list of elements.

<div id="container">
  <ol id="carousel">
    <li class="intro">
      <a href="/experts/">
        <img width="202" height="162" border="0"
             alt="Health Expert Advice: Leading experts share advice, tips and personal experiences."
             src="http://l.yimg.com/us.yimg.com/i/us/he/gr/v4/carouselintro.png"/>
      </a>
    </li>
    <li class="item">
      <a title="View Author's Biography" class="authimg"
         href="http://health.yahoo.com/experts/skintype/bio/leslie-baumann/">
        <img width="125" height="154" border="0"
             alt="Leslie Baumann, M.D."
             src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/LeslieBaumann_carousel.png"/>
      </a>
      <h3><a href="http://health.yahoo.com/experts/skintype/bio/leslie-baumann/">Leslie Baumann, M.D.</a></h3>
      <h4><a href="http://health.yahoo.com/experts/skintype/12135/skin-treatments-for-brides-to-be/">
      Skin Treatments for…</a></h4>
      <cite>Posted Thu 5.1.08</cite>
      <p class="all"><a href="http://health.yahoo.com/experts/skintype/">View All Posts »</a></p>
    </li>
    <li class="item">
      <a title="View Author's Biography" class="authimg"
         href="http://health.yahoo.com/experts/deepak/bio/deepak-chopra/">
        <img width="125" height="154" border="0"
             alt="Deepak Chopra, M.D."
             src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/DeepakChopra_carousel.png"/>
      </a>
      <h3><a href="http://health.yahoo.com/experts/deepak/bio/deepak-chopra/">Deepak Chopra, M.D.</a></h3>
      <h4><a href="/experts/deepak/2689/how-you-think-about-illness-affects-your-recovery/">
      How You Think About Illness…</a></h4>
      <cite>Posted Thu 5.1.08</cite>
      <p class="all"><a href="http://health.yahoo.com/experts/deepak/">View All Posts »</a></p>
    </li>
    <li class="item">
      <a title="View Author's Biography" class="authimg"
         href="http://health.yahoo.com/experts/nutrition/bio/christine-mckinney-nutrition/">
        <img width="125" height="154" border="0" class="lz"
          alt="Christine McKinney, M.S., R.D., C.D.E."
          src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/ChristineMcKinney_carousel.png"/>
      </a>
      <h3><a href="http://health.yahoo.com/experts/nutrition/bio/christine-mckinney-nutrition/">
      Christine McKinney, M.S., R.D., C.D.E.</a></h3>
      <h4><a href="http://health.yahoo.com/experts/nutrition/12067/fat-how-much-is-enough-of-a-good-thing/">
      Fat: How Much Is Enough of a…</a></h4>
      <cite>Posted Thu 5.1.08</cite>
      <p class="all"><a href="http://health.yahoo.com/experts/nutrition/">View All Posts »</a></p>
    </li>
    <li class="item">
      <a title="View Author's Biography" class="authimg"
         href="http://health.yahoo.com/experts/drmao/bio/maoshing-ni/">
        <img width="125" height="154" border="0" class="lz"
             alt="Dr. Maoshing Ni"
             src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/MaoshingNi_carousel.png"/>
      </a>
      <h3><a href="http://health.yahoo.com/experts/drmao/bio/maoshing-ni/">Dr. Maoshing Ni</a></h3>
      <h4><a href="http://health.yahoo.com/experts/drmao/13738/centenarian-tips-for-a-long-life/">
      Centenarian Tips for a Long…</a></h4>
      <cite>Posted Tue 4.29.08</cite>
      <p class="all"><a href="http://health.yahoo.com/experts/drmao/">View All Posts »</a></p>
    </li>
    <li class="item">
      <a title="View Author's Biography" class="authimg"
         href="http://health.yahoo.com/experts/breastcancer/bio/lillie-shockney/">
        <img width="125" height="154" border="0" class="lz"
             alt="Lillie Shockney, R.N., M.A.S."
             src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/LillieShockney_carousel.png"/>
      </a>
      <h3><a href="http://health.yahoo.com/experts/breastcancer/bio/lillie-shockney/">
      Lillie Shockney, R.N., M.A.S.</a></h3>
      <h4><a href="http://health.yahoo.com/experts/breastcancer/5673/are-you-being-over-or-undertreated/">
      Are You Being Over- or…</a></h4>
      <cite>Posted Tue 4.29.08</cite>
      <p class="all"><a href="http://health.yahoo.com/experts/breastcancer/">View All Posts »</a></p>
    </li>
    <li class="item">
      <a title="View Author's Biography" class="authimg"
         href="http://health.yahoo.com/experts/depression/bio/david-neubauer/">
        <img width="125" height="154" border="0" class="lz"
             alt="David Neubauer, M.D."
             src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/DavidNeubauer_carousel.png"/>
      </a>
      <h3><a href="http://health.yahoo.com/experts/depression/bio/david-neubauer/">David Neubauer, M.D.</a></h3>
      <h4><a href="http://health.yahoo.com/experts/depression/12445/could-a-breast-cancer-treatment-help-bipolar-disorder/">
      Could a Breast Cancer…</a></h4>
      <cite>Posted Tue 4.29.08</cite>
      <p class="all"><a href="http://health.yahoo.com/experts/depression/">View All Posts »</a></p>
    </li>
    <li class="item">
      <a title="View Author's Biography" class="authimg"
         href="http://health.yahoo.com/experts/capessa/bio/capessa/">
        <img width="125" height="154" border="0" class="lz"
             alt="Jennifer Tuma-Young"
             src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/Capessa_carousel.png"/>
      </a>
      <h3><a href="http://health.yahoo.com/experts/capessa/bio/capessa/">Jennifer Tuma-Young</a></h3>
      <h4><a href="http://health.yahoo.com/experts/capessa/3473/relieve-stress-with-your-senses/">
      Relieve Stress With Your…</a></h4>
      <cite>Posted Mon 4.28.08</cite>
      <p class="all"><a href="http://health.yahoo.com/experts/capessa/">View All Posts »</a></p>
    </li>
    <li class="item">
      <a title="View Author's Biography" class="authimg"
         href="http://health.yahoo.com/experts/healthieryou/bio/lucydanziger/">
        <img width="125" height="154" border="0" class="lz"
             alt="Lucy Danziger, SELF Edit"
             src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/LucyDanziger_carousel.png"/>
      </a>
      <h3><a href="http://health.yahoo.com/experts/healthieryou/bio/lucydanziger/">Lucy Danziger, SELF Edit</a></h3>
      <h4><a href="http://health.yahoo.com/experts/healthieryou/2639/de-stress-in-mere-minutes/">
      De-Stress in Mere Minutes</a></h4>
      <cite>Posted Mon 4.28.08</cite>
      <p class="all"><a href="http://health.yahoo.com/experts/healthieryou/">View All Posts »</a></p>
    </li>
    <li class="item">
      <a title="View Author's Biography" class="authimg"
         href="http://health.yahoo.com/experts/healthnews/bio/simeon-margolis/">
        <img width="125" height="154" border="0" class="lz"
             alt="Simeon Margolis, M.D., Ph.D."
             src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/SimeonMargolis_carousel.png"/>
      </a>
      <h3><a href="http://health.yahoo.com/experts/healthnews/bio/simeon-margolis/">Simeon Margolis, M.D., Ph.D.</a></h3>
      <h4><a href="/experts/healthnews/13879/alzheimer-s-and-dementia-will-you-be-affected/">
      Alzheimer's and Dementia: Will…</a></h4>
      <cite>Posted Mon 4.28.08</cite>
      <p class="all"><a href="http://health.yahoo.com/experts/healthnews/">View All Posts »</a></p>
    </li>
    <li class="item">
      <a title="View Author's Biography" class="authimg"
         href="http://health.yahoo.com/experts/intentblog/bio/intentblog/">
        <img width="125" height="154" border="0" class="lz"
             alt="Mallika Chopra, IntentBlog"
             src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/Intentblog_carousel.png"/>
      </a>
      <h3><a href="http://health.yahoo.com/experts/intentblog/bio/intentblog/">Mallika Chopra, IntentBlog</a></h3>
      <h4><a href="http://health.yahoo.com/experts/intentblog/2919/treating-a-sore-throat/">
      Treating a Sore Throat</a></h4>
      <cite>Posted Mon 4.28.08</cite>
      <p class="all"><a href="http://health.yahoo.com/experts/intentblog/">View All Posts »</a></p>
    </li>
    <li class="intro">
      <a href="http://health.yahoo.com/experts/">
        <img width="202" height="162" border="0"
             alt="Health Expert Advice: Leading experts share advice, tips and personal experiences."
             src="http://l.yimg.com/us.yimg.com/i/us/he/gr/v4/carouselintro.png"/>
      </a>
    </li>
  </ol>
</div>

Apart from setting the height of the Carousel, we have some more CSS rules to position the text and the images within the Carousel items.

.yui-carousel-element li {
    height: 158px;
}

#container {
    font-size: 13px;
}

#container a {
    text-decoration: none;
}

#container .intro {
    display: inline;
    float: left;
    margin: 0px 14px 0px 4px;
    width: 202px;
}

#container .item {
    display: inline;
    float: left;
    margin: 0 22px 0 12px;
    overflow: hidden;
    padding-right: 80px;
    width: 106px;
}

#container .item .authimg {
    bottom: 2px;
    margin-left: 61px;
    position: absolute;
    z-index: 1;
}

#container .item h3 {
    line-height: 85%;
    margin-top: 4px;
}

#container .item h3 a {
    font: 77% Arial, sans-serif;
    position: relative;
    text-transform: uppercase;
    z-index: 2;
}

#container .item h3 a:link {
    color:#35a235;
}

#container .item h4 {
    margin-top:5px;
}

#container .item h4 a {
    font: 100% Georgia, Times, serif;
    position: relative;
    z-index:2;
}

#container .item h4 a:link {
    color:#00639b;
}

#container .item cite {
    color: #888;
    display: block;
    font-size: 77%;
    line-height: normal;
    margin-bottom: 30px;
}

#container .item p.all {
    bottom: 25px;
    position: absolute;
    z-index: 2;
}

#container .item p.all a {
    font-weight: bold;
    font-size: 85%;
}

Since we have the elements in place, we can invoke the Carousel's constructor to create the widget. We'll pass an additional argument to the constructor, to set the animation speed. The "animation" configuration setting is an object that takes in the speed (to scroll) in seconds, and the animation effect.

YAHOO.util.Event.onDOMReady(function (ev) {
  var carousel = new YAHOO.widget.Carousel("container", {
    animation: { speed: 0.5 }
  });
  carousel.render(); // get ready for rendering the widget
  carousel.show();   // display the widget
}

Lets assemble everything together. The full JavaScript reads as follows:

(function () {
  var myLogReader, carousel;
  
  YAHOO.util.Event.onDOMReady(function (ev) {
    var myLogReader = new YAHOO.widget.LogReader(),
        carousel    = new YAHOO.widget.Carousel("container", {
          animation: { speed: 0.5 }
        });
        
    carousel.render(); // get ready for rendering the widget
    carousel.show();   // display the widget
  });
})();