Source of: carousel_vert_reveal_next_prev.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Carousel Component Example/Vertical - Reveal Next & Previous Items</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/utilities/utilities.js&2.6.0/build/container/container_core-min.js"></script>
<script type="text/javascript" src="scripts/carousel.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/reset-fonts-grids/reset-fonts-grids.css&2.6.0/build/base/base-min.css">
<link href="css/carousel.css" rel="stylesheet" type="text/css">
<link href="css/yui.css" rel="stylesheet" type="text/css">
<!--
Inlined styles for my overrides to the carousel for this demo.
Normally I would put this in a separate CSS file.
-->
<style type="text/css">
.carousel-component {
padding:4px;
margin:0px;
width:77px; /* seems to be needed for safari */
}
.carousel-component .carousel-list li {
margin:0px;
padding:2px;
width:77px; /* img width is 75 px from flickr + border-left (1) + border-right(1) */
}
/* Applies only to vertical carousels */
.carousel-component .carousel-vertical li {
margin-bottom:0px;
height:77px; /* image (75) + border-top (1) + border-bottom(1) */
}
.carousel-component .carousel-list li a {
display:block;
border:1px solid #e2edfa;
outline:none;
}
.carousel-component .carousel-list li a:hover {
border: 1px solid #aaaaaa;
}
.carousel-component .carousel-list li img {
display:block;
}
#up-arrow {
cursor:pointer;
margin-left:32px;
margin-top:20px;
}
#down-arrow {
cursor:pointer;
margin-left:32px; /* just ([width+margins]95/2)-([arrow width]26/2) 45-13=32 */
margin-top:5px;
}
</style>
<script type="text/javascript">
/**
* Image src URLs
**/
var imageList = [
"images/thumb_1.jpg",
"images/thumb_2.jpg",
"images/thumb_3.jpg",
"images/thumb_4.jpg",
"images/thumb_5.jpg",
"images/thumb_6.jpg",
"images/thumb_7.jpg",
"images/thumb_8.jpg",
"images/thumb_9.jpg",
"images/thumb_10.jpg",
"images/thumb_11.jpg",
"images/thumb_12.jpg",
"images/thumb_13.jpg",
"images/thumb_14.jpg",
"images/thumb_15.jpg",
"images/thumb_16.jpg",
"images/thumb_17.jpg",
"images/thumb_18.jpg"
];
var lastRan = -1;
/**
* Since carousel.addItem uses an HTML string to create the interface
* for each carousel item, this method formats the HTML for an LI.
**/
var fmtItem = function(imgUrl, url, title) {
var innerHTML =
'<img src="' +
imgUrl +
'" width="' +
75 +
'" height="' +
75+
'"/>';
return innerHTML;
};
/**
* Custom inital load handler. Called when the carousel loads the initial
* set of data items. Specified to the carousel as the configuration
* parameter: loadInitHandler
**/
var loadInitialItems = function(type, args) {
var start = args[0];
var last = args[1];
load(this, start, last);
};
/**
* Custom load next handler. Called when the carousel loads the next
* set of data items. Specified to the carousel as the configuration
* parameter: loadNextHandler
**/
var loadNextItems = function(type, args) {
var start = args[0];
var last = args[1];
var alreadyCached = args[2];
if(!alreadyCached) {
load(this, start, last);
}
};
/**
* Custom load previous handler. Called when the carousel loads the previous
* set of data items. Specified to the carousel as the configuration
* parameter: loadPrevHandler
**/
var loadPrevItems = function(type, args) {
var start = args[0];
var last = args[1];
var alreadyCached = args[2];
if(!alreadyCached) {
load(this, start, last);
}
};
var load = function(carousel, start, last) {
for(var i=start;i<=last;i++) {
var randomIndex = getRandom(18, lastRan);
lastRan = randomIndex;
carousel.addItem(i, fmtItem(imageList[randomIndex], "#", "Number " + i));
}
};
var getRandom = function(max, last) {
var randomIndex;
do {
randomIndex = Math.floor(Math.random()*max);
} while(randomIndex == last);
return randomIndex;
};
/**
* Custom button state handler for enabling/disabling button state.
* Called when the carousel has determined that the previous button
* state should be changed.
* Specified to the carousel as the configuration
* parameter: prevButtonStateHandler
**/
var handlePrevButtonState = function(type, args) {
var enabling = args[0];
var upImage = args[1];
if(enabling) {
upImage.src = "images/up-enabled.gif";
} else {
upImage.src = "images/up-disabled.gif";
}
};
var handleNextButtonState = function(type, args) {
var enabling = args[0];
var downImage = args[1];
if(enabling) {
downImage.src = "images/down-enabled.gif";
} else {
downImage.src = "images/down-disabled.gif";
}
};
var carousel; // for ease of debugging; globals generally not a good idea
var pageLoad = function()
{
carousel = new YAHOO.extension.Carousel("dhtml-carousel",
{
numVisible: 4,
animationSpeed: 0.25,
scrollInc: 4,
orientation: "vertical",
navMargin: 0,
firstVisible: 1,
revealAmount: 30,
size: 15,
loadInitHandler: loadInitialItems,
prevElement: "up-arrow",
nextElement: "down-arrow",
loadNextHandler: loadNextItems,
loadPrevHandler: loadPrevItems,
prevButtonStateHandler: handlePrevButtonState,
nextButtonStateHandler: handleNextButtonState
}
);
};
YAHOO.util.Event.addListener(window, 'load', pageLoad);
</script>
</head>
<body>
<div id="doc" class="yui-t7">
<div id="hd">
<h1>Reveal Next & Previous Items - Vertical Carousel</h1>
</div>
<div id="bd">
<p>Sometimes providing a slight reveal for the before & after items makes the carousel easier to understand. Revealing a partial view of the items outside the visible areas invites the user to explore the content.</p>
<p>Use the <em>revealAmount</em> parameter to specify how many pixels to reveal of the before and after items.</p>
<pre style="margin-bottom:10px;">
when creating a carousel, use
revealAmount: 20;
OR when reconfiguring the amount to reveal after the carousel is created, use
carousel.setProperty("revealAmount", 20);
</pre>
<!-- Carousel Structure -->
<div style="margin:0px;">
<img id="up-arrow" class="left-button-image" src="images/up-enabled.gif" alt="Previous Button"/>
</div>
<div id="dhtml-carousel" class="carousel-component">
<div class="carousel-clip-region">
<ul class="carousel-list">
<!-- Filled in via the loadInitHandler, loadNextHandler, and loadPrevHandler
<li id="item-1">
<a href="#">
<img src="http://static.flickr.com/74/162582364_7fc3e2d60d_s.jpg"/>
</a>Number One</li>
-->
</ul>
</div>
</div>
<div>
<img id="down-arrow" class="right-button-image" src="images/down-enabled.gif" alt="Next Button"/>
</div>
<div style="padding-top:20px;clear:both">View the <a href="source.php?url=carousel_vert_reveal_next_prev.html">source</a> or <a href="index.html">documentation</a></div>
</div>
</div>
</body>
</html>