JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://Elise1.Weebly.com/files/theme/jquery-1.6.1.min.js"></script>
<script src="http://Elise1.Weebly.com/files/theme/jquery.jplayer.js"></script>
<script src="http://Elise1.Weebly.com/files/theme/ttw-music-player.js"></script>
<script src="http://Elise1.Weebly.com/files/theme/myplaylist.js"></script>
<script src="http://Elise1.Weebly.com/files/theme/style.js"></script>
CSS
body {
background: #444 url(http://Elise1.Weebly.com/files/theme/bg.jpg) repeat 0 0 scroll;
}
.ttw-music-player {
width: 370px;
margin: 60px auto;
font-family: 'Lato', arial, sans-serif;
}
.ttw-music-player .player {
width: 100%;
}
/** Album Cover **/
.ttw-music-player .album-cover {
position: relative;
float: left;
background: #333 url(http://Elise1.Weebly.com/files/theme/album-cover-bg.jpg) no-repeat 0 0 scroll;;
box-shadow: 0px 1px 4px rgba(0, 0, 0, .75);
-moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, .75);
-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, .75);
}
.ttw-music-player .album-cover .img {
box-shadow: inset 0 0 1px rgba(255, 255, 255, .6);
-moz-box-shadow: inset 0 0 1px rgba(255, 255, 255, .6);
-webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, .6);
background-position:center center;
background-repeat:no-repeat;
background-color:transparent;
}
.ttw-music-player .album-cover .highlight {
background: transparent url(http://Elise1.Weebly.com/files/theme/album-cover-highlight.png) no-repeat 0 0 scroll;
opacity: 1;
}
.ttw-music-player .album-cover:hover .highlight {
opacity: 1;
}
.ttw-music-player .album-cover,
.ttw-music-player .album-cover .img,
.ttw-music-player .album-cover .highlight {
display: block;
height: 125px;
width: 125px;
}
.ttw-music-player .album-cover img,
.ttw-music-player .album-cover .img,
.ttw-music-player .album-cover .highlight {
position: absolute;
top: 0;
left: 0;
height:125px;
width:125px;
}
/** Track Info **/
.ttw-music-player .track-info {
width: 215px;
margin: 8px 0 0 30px;
float: left;
font-size: 12px;
}
.ttw-music-player .track-info p {
margin: 0 0 8px 0;
}
.ttw-music-player .player .title {
color: #efefef;
text-shadow: 0 1px 1px rgba(0, 0, 0, .8);
font-family: 'Lato Bold', arial, sans-serif;
font-weight: bold;
font-size: 14px;
}
.ttw-music-player .artist-outer {
...
JavaScript
$(document).ready(function(){
var description = 'Across the Sun';
$('body').ttwMusicPlayer(myPlaylist, {
autoPlay:false,
description:description,
currencySymbol:'$',
buyText:'BUY',
tracksToShow:1,
jPlayer:{
swfPath:'http://Elise1.Weebly.com/files/theme/' //You need to override the default swf path any time the directory structure changes
}
});
});