Displaying Your Loved Songs From Hype Machine with jQuery Hyped Plugin

File Size: 85.1KB
Views Total: 580
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Displaying Your Loved Songs From Hype Machine with jQuery Hyped Plugin

The Hype Machine is an MP3 blog aggregator that allow you to discover the most talked-about music from blogs around the world. Hyped is the jQuery plugin used to pull and display your most recent loved songs from hypem.com. Place the widget on your web page and help you share the favorite songs with your friends and visitors.

Basic Usage:

1. Create a container for the widget.

<div class="hyped">
<div id="loading"></div>
</div>

2. Include jQuery library and jQuery Hyped plugin on your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.hyped.min.js"></script> 

3. Initialize the plugin and place your Hypem user name in the javascript.

<script>
$(".hyped").hyped({
username : "YOUR USER NAME",
linked : true, // Wrap song info in a clickable link
count : 5, // Number of songs to return
loveCount : true, // Display track love count
artwork : true, // Display album artwork
thumbSize : medium, // small, medium or large
});
</script>

4. The sample CSS for the widget. You can change it to your taste.

.hyped {
margin-bottom: 50px;
}
.hyped li {
list-style: none;
position: relative;
padding: 3%;
border-bottom: 1px solid #e2e2e2;
border-left: 1px solid #e2e2e2;
border-right: 1px solid #e2e2e2;
}
.hyped li:nth-child(even) {
background-color: #ededed;
}
.hyped li:first-child {
border-top: 1px solid #e2e2e2;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.hyped li:last-child {
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}
.hyped li img {
max-width: 100%;
border-radius: 5px;
}
.album, .details {
display: inline-block;
}
.album {
width: 21%;
margin-right: 3%;
}
.details {
top: 0;
left: 0;
position: relative;
width: 76%;
}
.artist, .title {
padding: 1% 0;
position: relative;
display: block;
}
.title {
font-size: 14px;
top: 4%;
}
.artist {
font-weight: 600;
top: -1px;
}
.hyped li a, .hyped li a:visited {
text-decoration: none;
color: #222;
}
.hyped li a:hover {
color: #83c441;
}
.hyped span.love-count {
position: absolute;
right: 3%;
font-weight: 600;
font-size: 14px;
color: #ed2024;
}
#loading {
cursor: wait;
background-color: rgba(0,0,0,0);
opacity: .8;
border-radius: 50px;
margin: 5% auto;
animation: loading .5s infinite linear;
-moz-animation: loading .5s infinite linear;
-webkit-animation: loading .5s infinite linear;
border: 1px solid #222;
border-top: 1px solid rgba(0,0,0,0);
border-left: 1px solid rgba(0,0,0,0);
width: 30px;
height: 30px;
}

This awesome jQuery plugin is developed by stursby. For more Advanced Usages, please check the demo page or visit the official website.