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
Similar Threads
