mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-13 13:03:20 +00:00
276 lines
12 KiB
HTML
276 lines
12 KiB
HTML
<!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-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/a/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://l.yimg.com/fz/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://l.yimg.com/fz/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://l.yimg.com/fz/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://l.yimg.com/fz/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://l.yimg.com/fz/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://l.yimg.com/fz/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://l.yimg.com/fz/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://l.yimg.com/fz/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://l.yimg.com/fz/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://l.yimg.com/fz/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/a/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>
|