update YUI to 2.8.0r4
This commit is contained in:
Graham Knop
parent
27f474ec64
commit
2d28e0c0ba
2007 changed files with 344487 additions and 210070 deletions
|
|
@ -1 +1 @@
|
|||
(function(){var t=YAHOO.util.Event,u=YAHOO.util.Dom,AC=YAHOO.lang,k=YAHOO.env.ua,AE=YAHOO.widget.Carousel.prototype,P=AE.initAttributes,O={},o={},a=(k.gecko&&k.gecko>=1.9)||(k.ie&&k.ie>=8),p={"A":true,"SELECT":true,"TEXTAREA":true,"BUTTON":true,"INPUT":true},n="usearia",W="aria-",I="hidden",i="*",e="id",AB="role",j="option",r="listbox",b="li",d="selectedItem",A="selected",R="toolbar",AD="keydown",v="presentation",N="button",y="href",f="UL",V="A",c="render",G="selectedItemChange",D="show",K="pageChange",L="keypress",B="controls",Z="labelledby",Y="describedby",H=" (Current Page)";var S=function(AF,AG){AF.setAttribute(AB,AG);};var U=function(AF,AH,AG){AF.setAttribute((W+AH),AG);};var s=function(){var AF=this.getElementsByClassName(this.CLASSES.CAROUSEL_EL);if(AF.length===1){return AF[0];}};var J=function(){var AF=this.getElementsByClassName(this.CLASSES.NAVIGATION);if(AF.length===1){return AF[0];}};var x=function(AF){return((AF.tabIndex>-1||p[AF.nodeName.toUpperCase()])&&AF.type!==I&&!AF.disabled);};var C=function(AF){AF.tabIndex=0;};var w=function(AF){AF.tabIndex=-1;};var h=function(AF){var AG=this.getItem(AF);if(AG){u.getElementsBy(x,i,AG.id,C);}};var z=function(AF){var AG=this.getItem(AF);if(AG){u.getElementsBy(x,i,AG.id,w);}};var g=function(AG){var AF=AG.prevValue;if(AC.isNumber(AF)){z.call(this,AF);}h.call(this,AG.newValue);U(this.getElementForItem(AG.newValue),A,true);};var M=function(AK){t.stopPropagation(AK);var AJ=this.get(e),AI=O[AJ],AH=o[AJ],AG,AF;switch(t.getCharCode(AK)){case 37:case 38:AF=AI[AH];AF.tabIndex=-1;AH=AH-1;AG=AI[AH];if(!AG){AH=AI.length-1;AG=AI[AH];}o[AJ]=AH;AG.tabIndex=0;AG.focus();break;case 39:case 40:AF=AI[AH];AF.tabIndex=-1;AH=AH+1;AG=AI[AH];if(!AG){AH=0;AG=AI[AH];}o[AJ]=AH;AG.tabIndex=0;AG.focus();break;}};var q=function(AF){S(AF,j);u.getElementsBy(x,i,AF,w);};var E=function(){var AH=s.call(this),AG,AF;if(AH){S(AH,r);u.batch(AH.getElementsByTagName(b),q);AG=this.get(d);if(AC.isNumber(AG)){U(this.getElementForItem(AG),A,true);h.call(this,AG);}AF=J.call(this);if(AF){S(AF,R);t.on(AF,AD,M,null,this);}}};var X=function(AK,AI){var AM=AI.carousel,AG=AI.toolbarButtons;S(AK,v);var AL=u.getFirstChild(AK);S(AL,N);U(AL,B,AI.listID);AL.value=AL.getAttribute(y,2);AL.removeAttribute(y);var AJ=u.hasClass(AK,AM.CLASSES.SELECTED_NAV)?0:-1;AL.tabIndex=AJ;var AH=AG.length;var AF=u.getFirstChild(AL);if(AJ===0){o[AM.get(e)]=AH;AF.innerHTML=AF.innerHTML+H;}AG[AH]=AL;};var Q=function(AG,AF){var AH=AF.toolbarButtons;S(AG,v);U(AG,B,AF.listID);var AI=u.getFirstChild(AG);if(!AI.disabled){AI.tabIndex=-1;AH[AH.length]=AI;}};var m=function(AJ){var AH=J.call(this),AG=[],AF,AL,AK,AI;if(AH){AL=u.getFirstChild(AH);AK=s.call(this);if(AL&&AK){AI=AK.id||u.generatId(AK);if(AL.nodeName.toUpperCase()===f){S(AL,v);u.batch(AL.getElementsByTagName(b),X,{carousel:this,toolbarButtons:AG,listID:AI});}else{AL.tabIndex=0;U(AL,B,AI);}u.batch(this.getElementsByClassName(this.CLASSES.BUTTON),Q,{toolbarButtons:AG,listID:AI});O[this.get(e)]=AG;}}};var l=function(){AC.later(0,this,m);};var AA=function(AH){var AF=t.getTarget(AH),AG=t.getCharCode(AH);if(AF.nodeName.toUpperCase()===V&&u.getAncestorByClassName(AF,this.CLASSES.NAVIGATION)&&(AG===13||AG===32)){this._pagerClickHandler(AH);}};var F=function(AF,AG){this.set(Z,AG,true);this.removeListener(c,F);};var T=function(AF,AG){this.set(Y,AG,true);this.removeListener(c,T);};AC.augmentObject(AE,{_setLabelledBy:function(AH){var AF=J.call(this),AG=s.call(this);if(this.get(n)&&AF&&AG){U(AF,Z,AH);U(AG,Z,AH);}else{this.on(c,F,AH);}},_setDescribedBy:function(AH){var AF=J.call(this),AG=s.call(this);if(this.get(n)&&AF&&AG){U(AF,Y,AH);U(AG,Y,AH);}else{this.on(c,T,AH);}},_setUseARIA:function(AF){if(AF){this.on(c,E);this.on(G,g);this.on(D,m);this.on(K,l);this.on(L,AA);}},initAttributes:function(AF){this.setAttributeConfig(n,{value:AF.usearia||a,validator:AC.isBoolean,writeOnce:true,method:this._setUseARIA});this.setAttributeConfig(Z,{value:AF.labelledby,validator:AC.isString,method:this._setLabelledBy});this.setAttributeConfig(Y,{value:AF.describedby,validator:AC.isString,method:this._setDescribedBy});P.apply(this,arguments);if(a){this.set(n,true);}}},"initAttributes","_setUseARIA","_setLabelledBy","_setDescribedBy");}());
|
||||
(function(){var t=YAHOO.util.Event,u=YAHOO.util.Dom,AB=YAHOO.lang,k=YAHOO.env.ua,AD=YAHOO.widget.Carousel.prototype,P=AD.initAttributes,O={},o={},a=(k.gecko&&k.gecko>=1.9)||(k.ie&&k.ie>=8),p={"A":true,"SELECT":true,"TEXTAREA":true,"BUTTON":true,"INPUT":true},n="usearia",W="aria-",I="hidden",i="*",e="id",AA="role",j="option",r="listbox",b="li",d="selectedItem",A="selected",R="toolbar",AC="keydown",v="presentation",N="button",f="UL",V="A",c="render",G="selectedItemChange",D="show",K="pageChange",L="keypress",B="controls",Z="labelledby",Y="describedby",H=" (Current Page)";var S=function(AE,AF){AE.setAttribute(AA,AF);};var U=function(AE,AG,AF){AE.setAttribute((W+AG),AF);};var s=function(){var AE=this.getElementsByClassName(this.CLASSES.CAROUSEL_EL);if(AE.length===1){return AE[0];}};var J=function(){var AE=this.getElementsByClassName(this.CLASSES.NAVIGATION);if(AE.length===1){return AE[0];}};var x=function(AE){return((AE.tabIndex>-1||p[AE.nodeName.toUpperCase()])&&AE.type!==I&&!AE.disabled);};var C=function(AE){AE.tabIndex=0;};var w=function(AE){AE.tabIndex=-1;};var h=function(AE){var AF=this.getItem(AE);if(AF){u.getElementsBy(x,i,AF.id,C);}};var y=function(AE){var AF=this.getItem(AE);if(AF){u.getElementsBy(x,i,AF.id,w);}};var g=function(AF){var AE=AF.prevValue;if(AB.isNumber(AE)){y.call(this,AE);}h.call(this,AF.newValue);U(this.getElementForItem(AF.newValue),A,true);};var M=function(AJ){t.stopPropagation(AJ);var AI=this.get(e),AH=O[AI],AG=o[AI],AF,AE;switch(t.getCharCode(AJ)){case 37:case 38:AE=AH[AG];AE.tabIndex=-1;AG=AG-1;AF=AH[AG];if(!AF){AG=AH.length-1;AF=AH[AG];}o[AI]=AG;AF.tabIndex=0;AF.focus();break;case 39:case 40:AE=AH[AG];AE.tabIndex=-1;AG=AG+1;AF=AH[AG];if(!AF){AG=0;AF=AH[AG];}o[AI]=AG;AF.tabIndex=0;AF.focus();break;}};var q=function(AE){S(AE,j);u.getElementsBy(x,i,AE,w);};var E=function(){var AG=s.call(this),AF,AE;if(AG){S(AG,r);u.batch(AG.getElementsByTagName(b),q);AF=this.get(d);if(AB.isNumber(AF)){U(this.getElementForItem(AF),A,true);h.call(this,AF);}AE=J.call(this);if(AE){S(AE,R);t.on(AE,AC,M,null,this);}}};var X=function(AJ,AH){var AL=AH.carousel,AF=AH.toolbarButtons;S(AJ,v);var AK=u.getFirstChild(AJ);S(AK,N);U(AK,B,AH.listID);var AI=u.hasClass(AJ,AL.CLASSES.SELECTED_NAV)?0:-1;AK.tabIndex=AI;var AG=AF.length,AE=u.getFirstChild(AK);if(AI===0){o[AL.get(e)]=AG;AE.innerHTML=AE.innerHTML+H;}AF[AG]=AK;};var Q=function(AF,AE){var AG=AE.toolbarButtons;S(AF,v);U(AF,B,AE.listID);var AH=u.getFirstChild(AF);if(!AH.disabled){AH.tabIndex=-1;AG[AG.length]=AH;}};var m=function(AH){var AF=J.call(this),AE=[],AJ,AI,AG;if(AF){AJ=u.getFirstChild(AF);AI=s.call(this);if(AJ&&AI){AG=AI.id||u.generatId(AI);if(AJ.nodeName.toUpperCase()===f){S(AJ,v);u.batch(AJ.getElementsByTagName(b),X,{carousel:this,toolbarButtons:AE,listID:AG});}else{AJ.tabIndex=0;U(AJ,B,AG);}u.batch(this.getElementsByClassName(this.CLASSES.BUTTON),Q,{toolbarButtons:AE,listID:AG});O[this.get(e)]=AE;}}};var l=function(){AB.later(0,this,m);};var z=function(AG){var AE=t.getTarget(AG),AF=t.getCharCode(AG);if(AE.nodeName.toUpperCase()===V&&u.getAncestorByClassName(AE,this.CLASSES.NAVIGATION)&&(AF===13||AF===32)){this._pagerClickHandler(AG);}};var F=function(AE,AF){this.set(Z,AF,true);this.removeListener(c,F);};var T=function(AE,AF){this.set(Y,AF,true);this.removeListener(c,T);};AB.augmentObject(AD,{_setLabelledBy:function(AG){var AE=J.call(this),AF=s.call(this);if(this.get(n)&&AE&&AF){U(AE,Z,AG);U(AF,Z,AG);}else{this.on(c,F,AG);}},_setDescribedBy:function(AG){var AE=J.call(this),AF=s.call(this);if(this.get(n)&&AE&&AF){U(AE,Y,AG);U(AF,Y,AG);}else{this.on(c,T,AG);}},_setUseARIA:function(AE){if(AE){this.on(c,E);this.on(G,g);this.on(D,m);this.on(K,l);this.on(L,z);}},initAttributes:function(AE){this.setAttributeConfig(n,{value:AE.usearia||a,validator:AB.isBoolean,writeOnce:true,method:this._setUseARIA});this.setAttributeConfig(Z,{value:AE.labelledby,validator:AB.isString,method:this._setLabelledBy});this.setAttributeConfig(Y,{value:AE.describedby,validator:AB.isString,method:this._setDescribedBy});P.apply(this,arguments);if(a){this.set(n,true);}}},"initAttributes","_setUseARIA","_setLabelledBy","_setDescribedBy");}());YAHOO.register("carouselariaplugin",YAHOO.widget.Carousel,{version:"@VERSION@",build:"@BUILD@"});
|
||||
|
|
@ -38,7 +38,6 @@
|
|||
_KEY_DOWN = "keydown",
|
||||
_PRESENTATION = "presentation",
|
||||
_BUTTON = "button",
|
||||
_HREF = "href",
|
||||
_UL = "UL",
|
||||
_A = "A",
|
||||
_RENDER = "render",
|
||||
|
|
@ -261,15 +260,12 @@
|
|||
setARIARole(oAnchor, _BUTTON);
|
||||
setARIAProperty(oAnchor, _CONTROLS, object.listID);
|
||||
|
||||
oAnchor.value = oAnchor.getAttribute(_HREF, 2);
|
||||
oAnchor.removeAttribute(_HREF);
|
||||
|
||||
var nTabIndex = Dom.hasClass(element, oCarousel.CLASSES.SELECTED_NAV) ? 0 : -1;
|
||||
|
||||
oAnchor.tabIndex = nTabIndex;
|
||||
|
||||
var nToolBarIndex = aToolBarButtons.length;
|
||||
var oEM = Dom.getFirstChild(oAnchor);
|
||||
var nToolBarIndex = aToolBarButtons.length,
|
||||
oEM = Dom.getFirstChild(oAnchor);
|
||||
|
||||
if (nTabIndex === 0) {
|
||||
m_oCurrentButtonIndex[oCarousel.get(_ID)] = nToolBarIndex;
|
||||
|
|
@ -302,7 +298,6 @@
|
|||
|
||||
var oNavigation = getCarouselNavElement.call(this),
|
||||
aToolBarButtons = [],
|
||||
nCurrentButtonIndex,
|
||||
oFirstChild,
|
||||
oList,
|
||||
sListID;
|
||||
|
|
@ -498,4 +493,5 @@
|
|||
|
||||
}, "initAttributes", "_setUseARIA", "_setLabelledBy", "_setDescribedBy");
|
||||
|
||||
}());
|
||||
}());
|
||||
YAHOO.register("carouselariaplugin", YAHOO.widget.Carousel, {version: "@VERSION@", build: "@BUILD@"});
|
||||
|
|
|
|||
36
www/extras/yui/examples/carousel/assets/php/getimages2.php
Normal file
36
www/extras/yui/examples/carousel/assets/php/getimages2.php
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<?php
|
||||
error_reporting(0);
|
||||
|
||||
$images = array(
|
||||
'http://farm1.static.flickr.com/112/259393256_db700f455f_s.jpg',
|
||||
'http://farm1.static.flickr.com/80/259391136_6fa405c7f6_s.jpg',
|
||||
'http://farm1.static.flickr.com/87/258609416_bf0d44b445_s.jpg',
|
||||
'http://farm1.static.flickr.com/119/259395209_66c773a072_s.jpg',
|
||||
'http://farm1.static.flickr.com/92/259391837_c51c12afae_s.jpg',
|
||||
'http://farm1.static.flickr.com/83/259399727_3d170d0445_s.jpg',
|
||||
'http://farm1.static.flickr.com/121/258614620_16eb6867f7_s.jpg',
|
||||
'http://farm1.static.flickr.com/108/259397333_3e4a3960bd_s.jpg',
|
||||
'http://farm1.static.flickr.com/93/258613376_ff23d40bbf_s.jpg',
|
||||
'http://farm1.static.flickr.com/87/259398074_395d6000fe_s.jpg',
|
||||
'http://farm1.static.flickr.com/112/259383196_7af79d83ef_s.jpg',
|
||||
'http://farm1.static.flickr.com/81/258622067_7e136cb6bc_s.jpg',
|
||||
'http://farm1.static.flickr.com/95/259394895_8944fe68bc_s.jpg',
|
||||
'http://farm1.static.flickr.com/107/259394141_03f8cf975a_s.jpg',
|
||||
'http://farm1.static.flickr.com/111/259384471_7e387ad17c_s.jpg',
|
||||
'http://farm1.static.flickr.com/108/259396982_b330f60663_s.jpg',
|
||||
'http://farm1.static.flickr.com/81/259386441_c5fb7049de_s.jpg'
|
||||
);
|
||||
|
||||
$num = (int)$_GET['batchSize'];// number of items to return
|
||||
$pos = (int)$_GET['pos'];
|
||||
|
||||
$rv = '[';
|
||||
for ($i = 0; $i < $num; $i++) {
|
||||
$rv .= '"'.$images[$pos+$i].'",';
|
||||
}
|
||||
$rv = preg_replace('/,$/', '', $rv);
|
||||
$rv .= ']';
|
||||
|
||||
header('Content-Type: application/json');
|
||||
echo $rv;
|
||||
?>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -112,7 +112,7 @@
|
|||
</style>
|
||||
|
||||
<script src="../../build/utilities/utilities.js"></script>
|
||||
<script src="../../build/carousel/carousel-beta-min.js"></script>
|
||||
<script src="../../build/carousel/carousel-min.js"></script>
|
||||
<script type="text/javascript" src="../carousel/assets/carouselariaplugin.js"></script>
|
||||
|
||||
</head>
|
||||
|
|
@ -120,37 +120,37 @@
|
|||
<h1 id="my-carousel-label">Expert Health Advice</h1>
|
||||
<div id="container">
|
||||
<ol id="carousel">
|
||||
<li class="intro"><a href="http://health.yahoo.com/experts/"><img width="202" height="162" 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="intro"><a href="http://health.yahoo.com/experts/"><img width="202" height="162" 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" alt="Leslie Baumann, M.D." src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/LeslieBaumann_carousel.png"/></a>
|
||||
<a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/skintype/bio/leslie-baumann/"><img width="125" height="154" 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" alt="Deepak Chopra, M.D." src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/DeepakChopra_carousel.png"/></a>
|
||||
<a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/deepak/bio/deepak-chopra/"><img width="125" height="154" 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" 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>
|
||||
<a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/nutrition/bio/christine-mckinney-nutrition/"><img width="125" height="154" 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" class="lz" alt="Dr. Maoshing Ni" src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/MaoshingNi_carousel.png"/></a>
|
||||
<a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/drmao/bio/maoshing-ni/"><img width="125" height="154" 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" 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>
|
||||
<a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/breastcancer/bio/lillie-shockney/"><img width="125" height="154" 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>
|
||||
|
|
@ -158,35 +158,35 @@
|
|||
<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" class="lz" alt="David Neubauer, M.D." src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/DavidNeubauer_carousel.png"/></a>
|
||||
<a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/depression/bio/david-neubauer/"><img width="125" height="154" 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" class="lz" alt="Jennifer Tuma-Young" src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/Capessa_carousel.png"/></a>
|
||||
<a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/capessa/bio/capessa/"><img width="125" height="154" 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" class="lz" alt="Lucy Danziger, SELF Edit" src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/LucyDanziger_carousel.png"/></a>
|
||||
<a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/healthieryou/bio/lucydanziger/"><img width="125" height="154" 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" 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>
|
||||
<a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/healthnews/bio/simeon-margolis/"><img width="125" height="154" 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" class="lz" alt="Mallika Chopra, IntentBlog" src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/Intentblog_carousel.png"/></a>
|
||||
<a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/intentblog/bio/intentblog/"><img width="125" height="154" 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>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -8,8 +8,8 @@
|
|||
<link type="text/css" rel="stylesheet" href="../../build/carousel/assets/skins/sam/carousel.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/carousel/carousel-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/carousel/carousel-min.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>Using Ajax for deferred loading of items</title>
|
||||
|
||||
|
|
@ -20,8 +22,8 @@ body {
|
|||
<link rel="stylesheet" type="text/css" href="../../build/carousel/assets/skins/sam/carousel.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/carousel/carousel-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/carousel/carousel-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
|
|
@ -29,9 +31,10 @@ body {
|
|||
/* Style the spotlight container */
|
||||
#spotlight {
|
||||
border: 1px solid #ccc;
|
||||
height: 180px;
|
||||
height: 240px;
|
||||
margin: 10px auto;
|
||||
padding: 1px;
|
||||
text-align: center;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
|
|
@ -47,7 +50,7 @@ body {
|
|||
.yui-skin-sam .yui-carousel-nav select {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Always be sure to give your carousel items a width and a height */
|
||||
.yui-carousel-element li {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
|
|
@ -58,7 +61,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Using Ajax for deferred loading of items</h1>
|
||||
|
|
@ -82,7 +85,7 @@ body {
|
|||
<!-- The spotlight container -->
|
||||
<div id="spotlight"></div>
|
||||
<script>
|
||||
var carousel, curpos, items = [];
|
||||
var curpos, items = [];
|
||||
|
||||
function getImageTag(img) {
|
||||
return "<img src=\"" + img + "\" height=\"75\" width=\"75\">";
|
||||
|
|
@ -136,11 +139,19 @@ body {
|
|||
}
|
||||
|
||||
YAHOO.util.Event.onDOMReady(function (ev) {
|
||||
var i, spotlight;
|
||||
|
||||
var carousel, spotlight = YAHOO.util.Dom.get("spotlight");
|
||||
|
||||
carousel = new YAHOO.widget.Carousel("container", {
|
||||
|
||||
/* Setting numItems is required for dynamic loading. This property lets Carousel
|
||||
know how many total items it will ever be populated with (statically and/or dynamically).
|
||||
Not to be confused with numVisible: the number of items shown to a
|
||||
user per page. In this example, we don't specify numVisible and Carousel
|
||||
defaults to 3 items visible per page. */
|
||||
|
||||
numItems: 17
|
||||
});
|
||||
|
||||
YAHOO.util.Connect.asyncRequest("GET", "assets/php/getimages.php", {
|
||||
success: function (o) {
|
||||
var i, r = eval('(' + o.responseText + ')');
|
||||
|
|
@ -166,10 +177,6 @@ body {
|
|||
alert("Ajax request failed!");
|
||||
}
|
||||
});
|
||||
spotlight = YAHOO.util.Dom.get("spotlight"),
|
||||
|
||||
carousel.render();
|
||||
carousel.show();
|
||||
|
||||
carousel.on("loadItems", function (o) {
|
||||
// more items available?
|
||||
|
|
@ -178,12 +185,15 @@ body {
|
|||
|
||||
carousel.on("itemSelected", function (index) {
|
||||
// item has the reference to the Carousel's item
|
||||
var el, item = carousel.getElementForItem(index);
|
||||
var item = carousel.getElementForItem(index);
|
||||
|
||||
if (item) {
|
||||
spotlight.innerHTML = "<img src=\""+getLargeImage(item)+"\">";
|
||||
}
|
||||
});
|
||||
|
||||
carousel.render();
|
||||
carousel.show();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
508
www/extras/yui/examples/carousel/csl_dynloadandreplace.html
Normal file
508
www/extras/yui/examples/carousel/csl_dynloadandreplace.html
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,223 @@
|
|||
<!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>Using deferred loading of items and Carousel's built-in paginator</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/carousel/assets/skins/sam/carousel.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/carousel/carousel-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
/* Style the spotlight container */
|
||||
#spotlight {
|
||||
border: 1px solid #ccc;
|
||||
height: 240px;
|
||||
margin: 10px auto;
|
||||
padding: 1px;
|
||||
text-align: center;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
#carousel {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#container {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Always be sure to give your carousel items a width and a height */
|
||||
.yui-carousel-element li {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
/* Since for this example, we display more than the default 5 page buttons,
|
||||
by setting MAX_PAGER_BUTTONS, we increase the offset margin for IE6/7, to
|
||||
make space for the 6th button */
|
||||
.yui-skin-sam .yui-carousel-nav ul {
|
||||
*margin-left: -190px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Using deferred loading of items and Carousel's built-in paginator</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example extends <a href="http://developer.yahoo.com/yui/examples/carousel/csl_dynload2.html">Using Ajax for deferred loading of items</a> and demonstrates
|
||||
how to support <a href="http://developer.yahoo.com/yui/carousel/">YUI Carousel Control's</a> built-in paginator via the <code>replaceItem</code> method.</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<!-- The Carousel container -->
|
||||
<div id="container">
|
||||
<ol id="carousel"></ol>
|
||||
</div>
|
||||
<!-- The spotlight container -->
|
||||
<div id="spotlight"></div>
|
||||
<script>
|
||||
var curpos, batchSize, items = [];
|
||||
|
||||
function getImageTag(img) {
|
||||
return "<img src=\"" + img + "\" height=\"75\" width=\"75\">";
|
||||
}
|
||||
|
||||
function getImages(o) {
|
||||
var carousel = this,
|
||||
revealEnabled = carousel.get("revealAmount"),
|
||||
numVisible = carousel.get("numVisible"),
|
||||
curpos = o.num > numVisible + (revealEnabled?1:0) ? o.last - (o.last % numVisible) : o.first;
|
||||
|
||||
YAHOO.util.Connect.asyncRequest("GET", "assets/php/getimages2.php"+ "?r="+Math.random()+"&batchSize="+ batchSize + "&pos=" + curpos, {
|
||||
success: function (o) {
|
||||
var i = curpos,
|
||||
j = 0,
|
||||
r = eval("(" + o.responseText + ")"),
|
||||
item,
|
||||
loadingItems;
|
||||
|
||||
curpos += r.length;
|
||||
|
||||
while (i < curpos) {
|
||||
|
||||
if (r[j]) {
|
||||
|
||||
item = getImageTag(r[j]);
|
||||
|
||||
loadingItems = carousel.getLoadingItems();
|
||||
|
||||
if(loadingItems[i]){
|
||||
// We use replaceItem to swap out a placeholder loading item, which allows for backwards navigation.
|
||||
carousel.replaceItem(item,i);
|
||||
} else {
|
||||
carousel.addItem(item);
|
||||
}
|
||||
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
i++;
|
||||
j++;
|
||||
}
|
||||
|
||||
carousel.set("selectedItem", carousel.get("firstVisible"));
|
||||
},
|
||||
|
||||
failure: function (o) {
|
||||
alert("Ajax request failed!");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Get the image link from within its (parent) container.
|
||||
function getLargeImage(parent) {
|
||||
var el = parent.firstChild;
|
||||
|
||||
while (el) { // walk through till as long as there\'s an element
|
||||
if (el.nodeName.toUpperCase() == "IMG") { // found an image
|
||||
// flickr uses "_s" suffix for small, and "_m" for big
|
||||
// images respectively
|
||||
return el.src.replace(/_s\.jpg$/, "_m.jpg");
|
||||
}
|
||||
el = el.nextSibling;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
YAHOO.util.Event.onDOMReady(function (ev) {
|
||||
|
||||
var carousel, spotlight = YAHOO.util.Dom.get("spotlight");
|
||||
|
||||
/* Allow for anchor pagination to better demonstrate backwards loading.
|
||||
Note: MAX_PAGER_BUTTONS defaults to 5 making a Carousel with more than
|
||||
5 pages spawn a select box containing pages instead of page anchors. */
|
||||
|
||||
YAHOO.widget.Carousel.prototype.CONFIG.MAX_PAGER_BUTTONS = 100;
|
||||
|
||||
carousel = new YAHOO.widget.Carousel("container", {
|
||||
/* Setting numItems is required for dynamic loading. This property lets Carousel
|
||||
know how many total items it will ever be populated with.
|
||||
Not to be confused with numVisible: the number of items to display
|
||||
per page. In this case we don't specify it and Carousel
|
||||
defaults to 3 items visible per page. */
|
||||
|
||||
numItems: 17
|
||||
});
|
||||
|
||||
batchSize = carousel.get("numVisible");
|
||||
|
||||
YAHOO.util.Connect.asyncRequest("GET", "assets/php/getimages2.php" + "?r="+Math.random()+"&batchSize=" + batchSize, {
|
||||
success: function (o) {
|
||||
var i, r = eval("(" + o.responseText + ")");
|
||||
|
||||
curpos = r.length;
|
||||
|
||||
for (i = 0; i < curpos; i++) {
|
||||
items.push(r[i]);
|
||||
}
|
||||
|
||||
// check if the Carousel widget is available
|
||||
if (typeof carousel != "undefined") {
|
||||
for (i = 0; i < curpos; i++) {
|
||||
// if so, shove the elements into it
|
||||
carousel.addItem(getImageTag(items[i]));
|
||||
}
|
||||
carousel.set("selectedItem", 0);
|
||||
items = [];
|
||||
}
|
||||
},
|
||||
|
||||
failure: function (o) {
|
||||
alert("Ajax request failed!");
|
||||
}
|
||||
});
|
||||
|
||||
carousel.on("loadItems", function (o) {
|
||||
// more items available?
|
||||
getImages.call(this, o);
|
||||
});
|
||||
|
||||
carousel.on("itemSelected", function (index) {
|
||||
// item has the reference to the Carousel\'s item
|
||||
var item = carousel.getElementForItem(index);
|
||||
|
||||
if (item) {
|
||||
spotlight.innerHTML = "<img src=\""+getLargeImage(item)+"\">";
|
||||
}
|
||||
});
|
||||
|
||||
carousel.render();
|
||||
carousel.show();
|
||||
});
|
||||
</script>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
512
www/extras/yui/examples/carousel/csl_dynloadandreplace_log.html
Normal file
512
www/extras/yui/examples/carousel/csl_dynloadandreplace_log.html
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -6,7 +6,7 @@
|
|||
<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>
|
||||
<script src="../../build/carousel/carousel-min.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
.yui-carousel-element li {
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
<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"/>
|
||||
src="http://l.yimg.com/a/i/us/he/gr/v4/carouselintro.png"/>
|
||||
</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
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"/>
|
||||
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/">
|
||||
|
|
@ -134,7 +134,7 @@
|
|||
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"/>
|
||||
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/">
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
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"/>
|
||||
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>
|
||||
|
|
@ -161,7 +161,7 @@
|
|||
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"/>
|
||||
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/">
|
||||
|
|
@ -174,7 +174,7 @@
|
|||
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"/>
|
||||
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>
|
||||
|
|
@ -188,7 +188,7 @@
|
|||
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"/>
|
||||
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/">
|
||||
|
|
@ -201,7 +201,7 @@
|
|||
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"/>
|
||||
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/">
|
||||
|
|
@ -214,7 +214,7 @@
|
|||
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"/>
|
||||
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/">
|
||||
|
|
@ -227,7 +227,7 @@
|
|||
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"/>
|
||||
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/">
|
||||
|
|
@ -240,7 +240,7 @@
|
|||
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"/>
|
||||
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/">
|
||||
|
|
@ -252,7 +252,7 @@
|
|||
<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"/>
|
||||
src="http://l.yimg.com/a/i/us/he/gr/v4/carouselintro.png"/>
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
|
|
|
|||
393
www/extras/yui/examples/carousel/csl_multirow.html
Normal file
393
www/extras/yui/examples/carousel/csl_multirow.html
Normal file
File diff suppressed because one or more lines are too long
160
www/extras/yui/examples/carousel/csl_multirow_clean.html
Normal file
160
www/extras/yui/examples/carousel/csl_multirow_clean.html
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
<!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>Multi-row example</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/carousel/assets/skins/sam/carousel.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/carousel/carousel-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#container {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Always be sure to give your carousel items a width and a height */
|
||||
.yui-carousel-element li {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
}
|
||||
|
||||
.yui-carousel-element .yui-carousel-item-selected {
|
||||
border:0;/* Override selected item's dashed border so it feels more like a photo album */
|
||||
}
|
||||
</style>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Multi-row example</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example uses the <a href="http://developer.yahoo.com/yui/carousel/">YUI Carousel Control</a> to showcase a simple multi-row Carousel. The <code>numVisible</code>
|
||||
configuration setting now accepts an array, which instructs Carousel to organize its items into X number of rows by Y number of columns.</p>
|
||||
<p>A multi-row Carousel still offers all the features provided by a single-row carousel including, but not limitted to: <code>isVertical</code>, <code>animation</code>,
|
||||
<code>revealAmount</code>, <code>loadItems</code>, and items containing images and text.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<!-- The Carousel container -->
|
||||
|
||||
<div id="container">
|
||||
<ol id="carousel">
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/135/342099636_7b05b7cde5_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/136/342099938_fdef3ca3b5_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/147/342099522_3827eaa929_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/143/342100011_ec4d338c71_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/161/342100080_0fe4f9ccb0_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/153/342100324_82589c0ebe_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/147/342100376_d0336252a7_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/156/342100472_b9bc985fa4_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/133/342100566_39dae4698f_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/69/213130158_0d1aa23576_d.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/72/213128367_74b0a657c3_d.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/98/213129707_1f40c509fa_d.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/80/259391136_6fa405c7f6_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/87/258609416_bf0d44b445_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/119/259395209_66c773a072_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/83/259399727_3d170d0445_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/121/258614620_16eb6867f7_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/108/259397333_3e4a3960bd_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var carousel;
|
||||
|
||||
YAHOO.util.Event.onDOMReady(function (ev) {
|
||||
carousel = new YAHOO.widget.Carousel("container", {
|
||||
// specify number of columns and number of rows
|
||||
numVisible: [3, 2]
|
||||
});
|
||||
|
||||
carousel.render(); // get ready for rendering the widget
|
||||
carousel.show(); // display the widget
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
397
www/extras/yui/examples/carousel/csl_multirow_log.html
Normal file
397
www/extras/yui/examples/carousel/csl_multirow_log.html
Normal file
File diff suppressed because one or more lines are too long
532
www/extras/yui/examples/carousel/csl_pagination.html
Normal file
532
www/extras/yui/examples/carousel/csl_pagination.html
Normal file
File diff suppressed because one or more lines are too long
243
www/extras/yui/examples/carousel/csl_pagination_clean.html
Normal file
243
www/extras/yui/examples/carousel/csl_pagination_clean.html
Normal file
|
|
@ -0,0 +1,243 @@
|
|||
<!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>Using Paginator with Carousel</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/carousel/assets/skins/sam/carousel.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/paginator/assets/skins/sam/paginator.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/carousel/carousel-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/paginator/paginator-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#container {
|
||||
border: none;
|
||||
background: #e2edfa;
|
||||
margin: 0 auto;
|
||||
-moz-border-radius: 6px;
|
||||
padding: 8px 16px 4px;
|
||||
}
|
||||
|
||||
#spotlight {
|
||||
border: 1px solid #ccc;
|
||||
height: 180px;
|
||||
margin: 10px auto;
|
||||
padding: 1px;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
#pagination {
|
||||
font: 13px Arial, Helvetica, sans-serif;
|
||||
margin: 10px auto;
|
||||
padding: 1px;
|
||||
text-align: center;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.yui-skin-sam .yui-pg-page {
|
||||
background: #fff;
|
||||
border: 1px solid #cbcbcb;
|
||||
margin: 0 1px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
/* Always be sure to give your carousel items a width and a height */
|
||||
.yui-carousel-element li {
|
||||
height: 75px;
|
||||
opacity: 0.6;
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
.yui-carousel-element .yui-carousel-item-selected {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.yui-carousel-nav {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Using Paginator with Carousel</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>
|
||||
This example demonstrates the use of <a href="http://developer.yahoo.com/yui/pagination/">YUI Paginator Control</a> for navigating the <a href="http://developer.yahoo.com/yui/carousel/">YUI Carousel Control</a>.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<!-- The Carousel container -->
|
||||
<div id="container">
|
||||
<ol id="carousel">
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/135/342099636_7b05b7cde5_s.jpg">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/136/342099938_fdef3ca3b5_s.jpg">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/147/342099522_3827eaa929_s.jpg">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/143/342100011_ec4d338c71_s.jpg">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/161/342100080_0fe4f9ccb0_s.jpg">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/153/342100324_82589c0ebe_s.jpg">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/147/342100376_d0336252a7_s.jpg">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/156/342100472_b9bc985fa4_s.jpg">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/133/342100566_39dae4698f_s.jpg">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<!-- The pagination container -->
|
||||
<div id="pagination"></div>
|
||||
<!-- The spotlight container -->
|
||||
<div id="spotlight"></div>
|
||||
|
||||
<style type="text/css">
|
||||
#container {
|
||||
border: none;
|
||||
background: #e2edfa;
|
||||
-moz-border-radius: 6px;
|
||||
padding: 8px 16px 4px;
|
||||
}
|
||||
|
||||
#spotlight {
|
||||
border: 1px solid #ccc;
|
||||
height: 180px;
|
||||
margin: 10px auto;
|
||||
padding: 1px;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
#pagination {
|
||||
font: 13px Arial, Helvetica, sans-serif;
|
||||
margin: 10px auto;
|
||||
padding: 1px;
|
||||
text-align: center;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.yui-skin-sam .yui-pg-page {
|
||||
background: #fff;
|
||||
border: 1px solid #cbcbcb;
|
||||
margin: 0 1px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.yui-carousel-element li {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.yui-carousel-element .yui-carousel-item-selected {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.yui-carousel-nav {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function () {
|
||||
// Get the image link from within its (parent) container.
|
||||
function getImage(parent) {
|
||||
var el = parent.firstChild;
|
||||
|
||||
while (el) { // walk through till as long as there's an element
|
||||
if (el.nodeName.toUpperCase() == "IMG") { // found an image
|
||||
// flickr uses "_s" suffix for small, and "_m" for big
|
||||
// images respectively
|
||||
return el.src.replace(/_s\.jpg$/, "_m.jpg");
|
||||
}
|
||||
el = el.nextSibling;
|
||||
}
|
||||
|
||||
return "";
|
||||
}
|
||||
|
||||
YAHOO.util.Event.onDOMReady(function (ev) {
|
||||
var spotlight = YAHOO.util.Dom.get("spotlight"),
|
||||
carousel = new YAHOO.widget.Carousel("container"),
|
||||
numItems = carousel.get("numItems"),
|
||||
numVisible = carousel.get("numVisible"),
|
||||
paginator;
|
||||
|
||||
carousel.on("itemSelected", function (index) {
|
||||
// item has the reference to the Carousel's item
|
||||
var item = carousel.getElementForItem(index);
|
||||
|
||||
if (item) {
|
||||
spotlight.innerHTML = "<img src=\""+getImage(item)+"\">";
|
||||
}
|
||||
});
|
||||
|
||||
carousel.render();
|
||||
carousel.show();
|
||||
|
||||
paginator = new YAHOO.widget.Paginator({
|
||||
containers : "pagination",
|
||||
rowsPerPage : 1,
|
||||
template : "{PreviousPageLink} " +
|
||||
"{PageLinks} " +
|
||||
"{NextPageLink}",
|
||||
totalRecords : Math.ceil(numItems / numVisible)
|
||||
});
|
||||
|
||||
paginator.subscribe("changeRequest", function (state) {
|
||||
carousel.set("selectedItem", (state.page - 1) * numVisible);
|
||||
paginator.setState(state);
|
||||
});
|
||||
|
||||
carousel.on("pageChange", function (page) {
|
||||
// Paginator's page begins from 1
|
||||
// Also, we need to suppress this triggering a changeRequest
|
||||
// event.
|
||||
paginator.setPage(page + 1, true);
|
||||
});
|
||||
|
||||
paginator.render();
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
536
www/extras/yui/examples/carousel/csl_pagination_log.html
Normal file
536
www/extras/yui/examples/carousel/csl_pagination_log.html
Normal file
File diff suppressed because one or more lines are too long
436
www/extras/yui/examples/carousel/csl_paginationtemplate.html
Normal file
436
www/extras/yui/examples/carousel/csl_paginationtemplate.html
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,177 @@
|
|||
<!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>Pagination template example</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/carousel/assets/skins/sam/carousel.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/carousel/carousel-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.yui-carousel-pagination {
|
||||
position:absolute;
|
||||
left:0.7ex; /* relative to div#container */
|
||||
top:2.364ex;
|
||||
width:88px;
|
||||
height:12px;
|
||||
text-align:left;
|
||||
font-size:72%;
|
||||
}
|
||||
|
||||
/* Always be sure to give your carousel items a width and a height */
|
||||
.yui-carousel-element li {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
}
|
||||
|
||||
.yui-carousel-element .yui-carousel-item-selected {
|
||||
border:0; /* Override selected item's dashed border so it feels more like a photo album */
|
||||
}
|
||||
|
||||
.yui-skin-sam .yui-carousel .yui-carousel-nav ul {
|
||||
/* Since we're taking up space with the paging text, adjust the position of the page nav for IE6/7 */
|
||||
*margin-left:-140px;
|
||||
}
|
||||
</style>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Pagination template example</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example uses the <a href="http://developer.yahoo.com/yui/carousel/">YUI Carousel Control</a> to showcase how to customize and
|
||||
display pagination information.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<!-- The Carousel container -->
|
||||
|
||||
<div id="container">
|
||||
<ol id="carousel">
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/135/342099636_7b05b7cde5_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/136/342099938_fdef3ca3b5_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/147/342099522_3827eaa929_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/143/342100011_ec4d338c71_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/161/342100080_0fe4f9ccb0_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/153/342100324_82589c0ebe_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/147/342100376_d0336252a7_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/156/342100472_b9bc985fa4_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/133/342100566_39dae4698f_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/69/213130158_0d1aa23576_d.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/72/213128367_74b0a657c3_d.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/98/213129707_1f40c509fa_d.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/80/259391136_6fa405c7f6_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/87/258609416_bf0d44b445_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/119/259395209_66c773a072_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/83/259399727_3d170d0445_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/121/258614620_16eb6867f7_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
<li>
|
||||
<img src="http://farm1.static.flickr.com/108/259397333_3e4a3960bd_s.jpg"
|
||||
width="75" height="75">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var carousel;
|
||||
|
||||
YAHOO.util.Event.onDOMReady(function (ev) {
|
||||
carousel = new YAHOO.widget.Carousel("container", {
|
||||
// turn on multi-row to use in this example by passing an array of rows and cols
|
||||
numVisible: [3, 2]
|
||||
});
|
||||
|
||||
// register our text and/or HTML pagination template with embeded Carousel {tokens}
|
||||
carousel.registerPagination("<strong>Image</strong> {firstVisible} - {lastVisible} <strong>of</strong> {numItems}");
|
||||
|
||||
carousel.render(); // get ready for rendering the widget
|
||||
carousel.show(); // display the widget
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
440
www/extras/yui/examples/carousel/csl_paginationtemplate_log.html
Normal file
440
www/extras/yui/examples/carousel/csl_paginationtemplate_log.html
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -5,9 +5,19 @@
|
|||
<title>Carousel: Partially revealing previous and next items</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">
|
||||
<style type="text/css">
|
||||
#container {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.yui-carousel-element li {
|
||||
height: 180px;
|
||||
width: 240px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script src="../../build/element/element-beta-min.js"></script>
|
||||
<script src="../../build/carousel/carousel-beta-min.js"></script>
|
||||
<script src="../../build/element/element-min.js"></script>
|
||||
<script src="../../build/carousel/carousel-min.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>Spotlight example</title>
|
||||
|
||||
|
|
@ -19,12 +21,16 @@ body {
|
|||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/carousel/assets/skins/sam/carousel.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/carousel/carousel-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/carousel/carousel-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#container {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Style the spotlight container */
|
||||
#spotlight {
|
||||
border: 1px solid #ccc;
|
||||
|
|
@ -33,23 +39,17 @@ body {
|
|||
padding: 1px;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
#container {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Always be sure to give your carousel items a width and a height */
|
||||
.yui-carousel-element li {
|
||||
height: 75px;
|
||||
opacity: 0.6;
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
.yui-carousel-element .yui-carousel-item-selected {
|
||||
opacity: 1;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.yui-skin-sam .yui-carousel-nav ul li {
|
||||
margin: 0;
|
||||
.yui-carousel-element .yui-carousel-item-selected {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -57,7 +57,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Spotlight example</h1>
|
||||
|
|
@ -115,29 +115,8 @@ body {
|
|||
</div>
|
||||
<!-- The spotlight container -->
|
||||
<div id="spotlight"></div>
|
||||
|
||||
<style type="text/css">
|
||||
/* Style the spotlight container */
|
||||
#spotlight {
|
||||
border: 1px solid #ccc;
|
||||
height: 180px;
|
||||
margin: 10px auto;
|
||||
padding: 1px;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.yui-carousel-element li {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.yui-carousel-element .yui-carousel-item-selected {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function () {
|
||||
var carousel;
|
||||
|
||||
// Get the image link from within its (parent) container.
|
||||
function getImage(parent) {
|
||||
var el = parent.firstChild;
|
||||
|
|
@ -155,27 +134,20 @@ body {
|
|||
}
|
||||
|
||||
YAHOO.util.Event.onDOMReady(function (ev) {
|
||||
var el, item,
|
||||
spotlight = YAHOO.util.Dom.get("spotlight"),
|
||||
var spotlight = YAHOO.util.Dom.get("spotlight"),
|
||||
carousel = new YAHOO.widget.Carousel("container");
|
||||
|
||||
carousel.render(); // get ready for rendering the widget
|
||||
carousel.show(); // display the widget
|
||||
|
||||
// display the first selected item in the spotlight
|
||||
item = carousel.getElementForItem(carousel.get("selectedItem"));
|
||||
if (item) {
|
||||
spotlight.innerHTML = "<img src=\"" + getImage(item) + "\">";
|
||||
}
|
||||
|
||||
carousel.on("itemSelected", function (index) {
|
||||
// item has the reference to the Carousel's item
|
||||
item = carousel.getElementForItem(index);
|
||||
var item = carousel.getElementForItem(index);
|
||||
|
||||
if (item) {
|
||||
spotlight.innerHTML = "<img src=\""+getImage(item)+"\">";
|
||||
}
|
||||
});
|
||||
|
||||
carousel.render(); // get ready for rendering the widget
|
||||
carousel.show(); // display the widget
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue