iTunes Music Store "New Releases" Javascript

R

RobG

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="&lt;&lt;Left"
onclick="move('thumbBox','left');">
<input type="button" value="Right&gt;&gt;"
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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top