<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scrolly | JavaScript Examples | UIZE JavaScript Framework</title>
<meta name="keywords" content="featured animation Uize.Widget.Scrolly"/>
<meta name="description" content="See the scrolly widget in action, as it scrolls two sets of thumbnails - horizontal and vertical - with an accompanying JavaScript animation effect."/>
<link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
<link rel="stylesheet" href="../css/page.css"/>
<link rel="stylesheet" href="../css/page.example.css"/>
<link rel="stylesheet" href="../css/widget.scrolly.css"/>
<style type="text/css">
/*** styles for thumbnails ***/
a.thumbnail, a.thumbnail:link, a.thumbnail:visited, a.thumbnail:hover, a.thumbnail:active {
border:none;
}
a.thumbnail img, a.thumbnail:link img, a.thumbnail:visited img {
background:#fff;
border:1px solid #aaa;
opacity:.9;
width:105px;
height:75px;
padding:0;
margin:2px;
}
a.thumbnail:hover img, a.thumbnail:active img {
border:1px solid #ccc;
opacity:1;
}
/*** scrolly overrides ***/
/*** horizontal scrolly ***/
.scrollyHorz .scrollyView a img {
margin-top:4px;
margin-bottom:4px;
}
/*** vertical scrolly ***/
.scrollyVert .scrollyView a {
display:block;
}
.scrollyVert .scrollyView a img {
margin-left:4px;
margin-right:4px;
}
</style>
</head>
<body>
<script type="text/javascript" src="../js/Uize.js"></script>
<h1 class="document-title">
<a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
<a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
Scrolly
<div id="page-actions" class="pageActions">
<a href="source-code/scrolly.html" class="buttonLink">SOURCE</a>
</div>
</h1>
<div class="main">
<!-- explanation copy -->
<div class="explanation">
<p>In this example, two instances of <a href="../reference/Uize.Widget.Scrolly.html"><code>Uize.Widget.Scrolly</code></a> are created - one for a horizontal scrolly, and the other for a vertical scrolly. Click on the scrolly navigation buttons to scroll a scrolly's view node, one "page" at a time, with an accompanying JavaScript animation effect. <b>Shift-click</b> on the navigation buttons to scroll all the way to the beginning or end. Also, because this example uses the <a href="../reference/Uize.Widget.ThumbZoom.html"><code>Uize.Widget.ThumbZoom</code></a> class, you can click on the thumbnails to get a zoom out preview.</p>
</div>
<table>
<tr valign="top">
<td>
<!-- HTML for the horizontal scrolly's UI -->
<div class="scrollyHorz">
<a id="page_horzScrolly_left" href="javascript://" class="scrollyButton button">
<div class="arrowLeft arrow"></div>
</a>
<div id="page_horzScrolly-view" class="scrollyView">
<a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228277244419896914&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228277244419896914&max_dim=105" title="A Lighted Spot" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228109666540948246&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228109666540948246&max_dim=105" title="Braving the Onslaught" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228745103279879745&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228745103279879745&max_dim=105" title="Companion to a Sunset" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228866001826566384&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228866001826566384&max_dim=105" title="Concrete Eternity" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228321774790917687&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228321774790917687&max_dim=105" title="Corrugate It" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228463251413365530&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228463251413365530&max_dim=105" title="Crank It Up" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228507796122097730&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228507796122097730&max_dim=105" title="Driving Through the Rain" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228267745724726415&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228267745724726415&max_dim=105" title="Flock of Clouds" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228937676589416694&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228937676589416694&max_dim=105" title="Hail to the Opening" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228483162492178759&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228483162492178759&max_dim=105" title="Heavens Open Over Pedro" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228855435929294206&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228855435929294206&max_dim=105" title="Hook in the Wall" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228496639998196479&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228496639998196479&max_dim=105" title="Huddling Together" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228623703668130129&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228623703668130129&max_dim=105" title="Just a Visitor" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228897217554746467&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228897217554746467&max_dim=105" title="Out the Bus Window" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228554379238024970&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228554379238024970&max_dim=105" title="Pacifica Pier From Milagra"/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228550194293355740&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228550194293355740&max_dim=105" title="Pier Before the Storm" alt=""/></a>
</div>
<a id="page_horzScrolly_right" href="javascript://" class="scrollyButton button">
<div class="arrowRight arrow"></div>
</a>
</div>
</td>
<td style="width:20px;"></td>
<td>
<!-- HTML for the vertical scrolly's UI -->
<div class="scrollyVert">
<a id="page_vertScrolly_up" href="javascript://" class="scrollyButton button">
<div class="arrowUp arrow"></div>
</a>
<div id="page_vertScrolly-view" class="scrollyView">
<a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228234695931308619&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228234695931308619&max_dim=105" title="Rain Fall" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228580091324147918&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228580091324147918&max_dim=105" title="Retirement Home" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228074575082103294&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228074575082103294&max_dim=105" title="San Fran Sunset" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228118804591686444&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228118804591686444&max_dim=105" title="San Mateo Sunset" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228948359037055649&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228948359037055649&max_dim=105" title="Setting Below Clouds" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228026937512483785&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228026937512483785&max_dim=105" title="Shadow of the Past" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228586025680090150&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228586025680090150&max_dim=105" title="Stacks of Steel" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228888824201666423&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228888824201666423&max_dim=105" title="Sun Sets Soon at Sweeney" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228484030353525473&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228484030353525473&max_dim=105" title="Sun Through a Tree" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228859576507617417&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228859576507617417&max_dim=105" title="Sweeney Ridge Sunset" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228620264277935845&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228620264277935845&max_dim=105" title="Trees Meet Sky" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228786228006249323&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228786228006249323&max_dim=105" title="Twins" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228225341102196754&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228225341102196754&max_dim=105" title="Urban Heavens" alt=""/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228568520270882657&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228568520270882657&max_dim=105" title="Wave Abstract"/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228213464916914087&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228213464916914087&max_dim=105" title="Window Lean"/></a><a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228734547884666866&max_dim=500" class="thumbnail"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228734547884666866&max_dim=105" title="Windswept and Alone"/></a>
</div>
<a id="page_vertScrolly_down" href="javascript://" class="scrollyButton button">
<div class="arrowDown arrow"></div>
</a>
</div>
</td>
</tr>
</table>
</div>
<!-- JavaScript code to wire up the scrollies and the "thumb zoom" behavior for the image thumbnails -->
<script type="text/javascript">
Uize.module ({
required:[
'UizeSite.Page.Example.library',
'UizeSite.Page.Example',
'Uize.Widget.Scrolly',
'Uize.Widget.ThumbZoom',
'Uize.Node',
'Uize.Curve.Rubber'
],
builder:function () {
/*** create the example page widget ***/
var page = window.page = UizeSite.Page.Example ();
/*** add the scrolly child widgets ***/
page.addChild ('horzScrolly',Uize.Widget.Scrolly);
page.addChild ('vertScrolly',Uize.Widget.Scrolly);
/*** add the Uize.Widget.ThumbZoom child widget ***/
page.addChild (
'thumbZoom',
Uize.Widget.ThumbZoom,
{thumbNodes:{tagName:'A',className:'thumbnail'},imageValidator:null}
);
/*** wire up the page widget ***/
page.wireUi ();
}
});
</script>
</body>
</html>