upgrading to YUI 2.6
data tables are going to need some work yet, but the other stuff seems to be working 100%
This commit is contained in:
JT Smith
parent
a041e93da8
commit
20f8df1291
2106 changed files with 993560 additions and 237 deletions
275
www/extras/yui/examples/carousel/csl_imagentext_source.html
Normal file
275
www/extras/yui/examples/carousel/csl_imagentext_source.html
Normal file
|
|
@ -0,0 +1,275 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||
<title>Carousel: Using both images and text within an item</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../../build/carousel/assets/skins/sam/carousel.css">
|
||||
<script src="../../build/utilities/utilities.js"></script>
|
||||
<script src="../../build/carousel/carousel-beta-min.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
.yui-carousel-element li {
|
||||
height: 158px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#container {
|
||||
font-size: 13px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#container a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#container .intro {
|
||||
display: inline;
|
||||
margin: 0px 14px 0px 4px;
|
||||
width: 202px;
|
||||
}
|
||||
|
||||
#container .item {
|
||||
display: inline;
|
||||
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%;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
<h1>Using both images and text within an item</h1>
|
||||
|
||||
<p> This example uses the <a href="http://developer.yahoo.com/yui/carousel">YUI Carousel Control</a> to showcase an example where each
|
||||
(list) item contains an image and some text. As always, you can use arrow
|
||||
keys to select items or to click on an item to select it. </p>
|
||||
<p> Also in this example, you will see the animation capabilities available in
|
||||
the YUI Carousel Control. For getting an animated effect during scroll, you
|
||||
will have to set the <code>animation</code> configuration setting in the constructor and include the <a href="http://developer.yahoo.com/yui/animation/">YUI Animation Utility</a> on the page.</p>
|
||||
<!-- The Carousel container -->
|
||||
<div id="container">
|
||||
<ol id="carousel">
|
||||
<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>
|
||||
<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="http://health.yahoo.com/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="http://health.yahoo.com/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>
|
||||
<script>
|
||||
(function () {
|
||||
var carousel;
|
||||
|
||||
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
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue