Skip to content

Instantly share code, notes, and snippets.

@imlucas

imlucas/gist:95960

Created April 15, 2009 18:55
Show Gist options
  • Save imlucas/95960 to your computer and use it in GitHub Desktop.
Save imlucas/95960 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.htm
<html>
<head>
<title>Recommendations for you - Amie Street</title>
<style type="text/css">
*{ padding:0px; margin:0px; }
body{ background:#D5DEE7; }
a{ color:#C8DCE5; }
h3{ margin: 10px 10px 0 10px; color:#FFF; font:16pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold; }
.boxgrid{
width: 216px;
height: 216px;
margin:10px; margin-left: 5px; margin-right: 5px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0; cursor:pointer;
}
.boxgrid p{
padding: 0 10px;
color:#afafaf;
font-weight:bold;
font:8pt "Lucida Grande", Arial, sans-serif;
}
.boxcaption{
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.captionfull .boxcaption {
top: 216;
left: 0;
}
.caption .boxcaption {
top: 216;
left: 0;
}
.top-song{padding-top: 10px !important;} .ed-note{padding-top:10px !important;}
#header{padding: 10px; background-color: rgb(22, 22, 19); font-family: Arial,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; font-size-adjust: none; font-stretch: normal; font-size: 18pt; color: rgb(221, 221, 221);}
#playerbox{position: fixed; width: 100%; bottom: 0pt;}
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<script type="text/javascript">
function randEffectClass (){
var c = ['thecombo','slidedown','peek','slideright','caption','captionfull'];
return c[Math.round(Math.random()*(c.length-1))];
}
$(document).ready(function(){
$.getJSON('http://amiestreet.com/api/v0.1/RecommendationsApi/recommend.json?count=21&jsoncallback=?', function(data){
$.each(data, function(){
console.debug(randEffectClass());
$('#header').append('<div class="boxgrid '+randEffectClass()+' album" id="album-'+this.album.id+'"><img class="cover"width="216" height="216" src="'+this.album.image.large+'" /><h3> <a href="'+this.album.url+'" target="_blank">'+this.album.title+'</a></h3><p>by '+this.album.artist.name+'<br/></p></div>');
});
//Vertical Sliding
$('.boxgrid.slidedown').hover(function(){
$(".cover", this).stop().animate({top:'-216px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
});
//Horizontal Sliding
$('.boxgrid.slideright').hover(function(){
$(".cover", this).stop().animate({left:'216px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
});
//Diagnal Sliding
$('.boxgrid.thecombo').hover(function(){
$(".cover", this).stop().animate({top:'216px', left:'216px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
});
//Partial Sliding (Only show some of background)
$('.boxgrid.peek').hover(function(){
$(".cover", this).stop().animate({top:'140px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
});
//Full Caption Sliding (Hidden to Visible)
$('.boxgrid.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
});
//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
});
$.each($('div.album'), function(){
var el =$(this);
var id = $(this).attr('id').replace('album-', '');
$.getJSON('http://amiestreet.com/api/v0.1/AlbumApi/topSongs.json?album='+id+'&limit=1&jsoncallback=?', function(data){
$('<p class="top-song">Must hear: <a href="javascript:playSong(\''+data[0].id+'\');">&quot;'+data[0].title+'&quot;</a></p>').insertAfter(el.find('p'));
});
$.getJSON('http://amiestreet.com/api/v0.1/AlbumApi/topRecsWithReview.json?album='+id+'&jsoncallback=?', function(note){
$('<p class="ed-note">'+note[0].user.username+' says &quot;'+note[0].review+'&quot;</p>').insertAfter(el.find('p.top-song'));
});
});
});
});
function playSong(id){
$('#playerbox').html('<embed height="55" width="100%" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash" src="http://amiestreet.com/static/swf/AsmwPlayer.swf?songId='+id+'&autoplay=true"/>');
}
</script>
</head>
<body>
<div id="header">
<div style="float: right;">
by lucas@amiestreet inspired by <a href="http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/">Saam Dunn</a>
</div>
Recommendations for you
</div>
<div id="playerbox"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment