ms******@gmail.com wrote:
Has anyone seen any Javascript that mimics the effect that allows you
to browse through the New Releases, Just Added sections of the iTunes
Music Store? Where you click the arrow icon and the next 4 albums are
shown.
Example: http://imac2.taxrecords.com/mstearne/misc/Picture3.png
Here's a simple example I wrote some time ago - needs feature detection
added. If you want to scroll more than one at a time, call it from a loop.
It could be far more sophisticated, or use an array of images and fixed
set of thumb frames - how many ways can you skin a cat. I like this one
'cos it's simple.
If scriptless fallback is required:
- have #thumbBox height and width unset by default, set
using script as page loads (modify the style rule is best)
- hide the left/right buttons by default and show using script, it
can be done at the same time the #thumbBox rule properties
are modified.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Scrolling thumbs example</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
#thumbBox {
border: 3px solid #FF9900;
width: 6em;
height: 2em;
overflow: hidden;
position: relative;
}
.thumb {
float: left;
width: 2em;
height: 2em;
font-weight: bold;
text-align: center;
line-height: 2em;
}
.c0 {background-color: #f00;}
.c1 {background-color: #00f;}
.c2 {background-color: #0f0;}
.c3 {background-color: #ff0;}
.c4 {background-color: #0ff;}
.c5 {background-color: #f0f;}
.c6 {background-color: #f9f;}
</style>
</head>
<body>
<h1>Demonstration of scrolling thumbnails</h1>
<script type="text/javascript">
function move(id, way)
{
var box = document.getElementById(id);
var thumbs = box.getElementsByTagName('div');
if ('left' == way) {
box.insertBefore(thumbs[thumbs.length-1],thumbs[0]);
} else {
box.appendChild(thumbs[0]);
}
}
</script>
<div>
<input type="button" value="<<Left"
onclick="move('thumbBox','left');">
<input type="button" value="Right>>"
onclick="move('thumbBox','right');">
</div>
<div id="thumbBox">
<div class="thumb c0">1</div>
<div class="thumb c1">2</div>
<div class="thumb c2">3</div>
<div class="thumb c3">4</div>
<div class="thumb c4">5</div>
<div class="thumb c5">6</div>
<div class="thumb c6">7</div>
</div>
</body>
</html>
--
Rob
