last.fm

functions.php

@@ -61,16 +61,24 @@ function dw_scripts() {
 		wp_enqueue_script( 'init', get_template_directory_uri() . '/js/init.js', 'jquery', '', true );
 		//wp_enqueue_script( 'init', get_template_directory_uri() . '/js/init.min.js', 'jquery', '', true );
 	} 
-	else {
+	if ( is_page('music') || is_archive() || is_search() ) {	
 		wp_enqueue_script( 'scripts-o', get_template_directory_uri() . '/js/script-o.js', 'jquery', '', true );
 		//wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/script-o.min.js', 'jquery', '', true );
 		wp_enqueue_script( 'init-o', get_template_directory_uri() . '/js/init-o.js', 'jquery', '', true );
 		//wp_enqueue_script( 'init', get_template_directory_uri() . '/js/init-o.min.js', 'jquery', '', true );
+		wp_enqueue_script( 'last-fm', get_template_directory_uri() . '/js/last.fm.js', 'jquery', '', true );
 	}
 
 	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
 		wp_enqueue_script( 'comment-reply' );
-	} 
+	}
+	
+	else {
+		wp_enqueue_script( 'scripts-o', get_template_directory_uri() . '/js/script-o.js', 'jquery', '', true );
+		//wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/script-o.min.js', 'jquery', '', true );
+		wp_enqueue_script( 'init-o', get_template_directory_uri() . '/js/init-o.js', 'jquery', '', true );
+		//wp_enqueue_script( 'init', get_template_directory_uri() . '/js/init-o.min.js', 'jquery', '', true );
+	}
 	
 	
 	

js/last.fm.js

@@ -0,0 +1,69 @@
+/* https://github.com/alexcash/jQuery.last.fm */
+
+(function( $ ) {
+	$.fn.lfm = function(options){
+		var settings = $.extend({
+			APIkey:		null,
+			User:		null,
+			Behavior:	"hover",
+			limit:		20,
+			period:		"3month"	// overall | 7day | 1month | 3month | 6month | 12month
+		}, options);
+
+		var url = "http://ws.audioscrobbler.com/2.0/?method=user.gettopalbums&user=" + settings.User + "&period=" + settings.period + "&api_key=" + settings.APIkey + "&format=json&limit=" + settings.limit +"&callback=?";
+		var albums = [];
+
+		function isLoaded (albumElement) {
+
+			for (var i = 0; i < albums.length; i++){
+				var markup = $("<div class='album'><div class='front'><img src='" + albums[i].art + "'><div class='alpha'></div></div><div class='back'><h2>" + albums[i].artist + "</h2><h1>" + albums[i].name + "</h1><h3>" + albums[i].played + " tracks played</h3></div></div>");
+				albumElement.append(markup);
+			}
+
+			if (settings.Behavior == "hover") {
+				albumElement.find('.album').hover(function(){
+					$(this).addClass('flip');
+				},function(){
+					$(this).removeClass('flip');
+				});
+			} else {
+				$(document).bind('click', function (e) {
+					$('.flip').removeClass('flip');
+				});
+
+				albumElement.find('.album').click(function(e){
+					e.stopPropagation();
+					if($('.flip')[0] === this){
+						$(this).removeClass('flip');
+					} else {
+						$('.flip').removeClass('flip');
+						$(this).addClass('flip');
+					}
+				});
+			}
+		}
+
+		return this.each(function(){
+			var $this = $(this);
+			$.getJSON( url, function(data){
+				$(data.topalbums.album).each(function(){
+					albums.push ({
+						name:	this.name,
+						artist: this.artist.name,
+						played: this.playcount,
+						art:	this.image[this.image.length-1]["#text"]
+					});
+				});
+				isLoaded($this);
+			});
+		});
+	};
+})( jQuery );
+
+$('.albums').lfm({
+    APIkey: "e12ea1d0253898ee9a93edfe42ffdeab",
+    User: "windhamdavid",
+    Behavior: "hover",
+    limit: 100,
+    period: "3month"
+});

page-music.php

@@ -0,0 +1,183 @@
+<?php
+/*
+Template Name: Music
+*/
+
+get_header(); ?>
+<style media="screen" type="text/css">
+.albums {
+  position: relative;
+}
+.albums:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.album {
+  float: left;
+  height: auto;
+  position: relative;
+  font-size: .8em;
+  -webkit-transition: -webkit-transform 0.4s ease-in-out, z-index 0.4s ease-in-out;
+  -moz-transition: -moz-transform 0.4s ease-in-out, z-index 0.4s ease-in-out;
+  -ms-transition: -ms-transform 0.4s ease-in-out, z-index 0.4s ease-in-out;
+  -o-transition: -o-transform 0.4s ease-in-out, z-index 0.4s ease-in-out;
+  transition: transform 0.4s ease-in-out, z-index 0.4s ease-in-out;
+  -webkit-perspective: 600px;
+  perspective: 600px;
+}
+.album img {
+  width: 100%;
+  height: auto;
+}
+.album .front, .album .back {
+  float: none;
+  width: 100%;
+  height: auto;
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  -webkit-transition: -webkit-transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
+  -moz-transition: -moz-transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
+  -ms-transition: -ms-transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
+  -o-transition: -o-transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
+  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
+}
+.album .front {
+  z-index: 1;
+  -webkit-transform: rotateY(0deg);
+  -moz-transform: rotateY(0deg);
+  -ms-transform: rotateY(0deg);
+  -o-transform: rotateY(0deg);
+  transform: rotateY(0deg);
+}
+.album .front .alpha {
+  -webkit-transition: opacity 0.4s ease-in-out;
+  -moz-transition: opacity 0.4s ease-in-out;
+  -ms-transition: opacity 0.4s ease-in-out;
+  -o-transition: opacity 0.4s ease-in-out;
+  transition: opacity 0.4s ease-in-out;
+  display: block;
+  content: '';
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgba(255, 255, 255, 0.75);
+  opacity: 0;
+}
+.album .back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  text-align: center;
+  font-family: sans-serif;
+  padding: 10px;
+  opacity: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-transform: rotateY(-180deg);
+  -moz-transform: rotateY(-180deg);
+  -ms-transform: rotateY(-180deg);
+  -o-transform: rotateY(-180deg);
+  transform: rotateY(-180deg);
+}
+.album.flip {
+  -webkit-transform: scale(1.1, 1.1);
+  -moz-transform: scale(1.1, 1.1);
+  -ms-transform: scale(1.1, 1.1);
+  -o-transform: scale(1.1, 1.1);
+  transform: scale(1.1, 1.1);
+  z-index: 10;
+}
+.album.flip .front {
+  -webkit-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
+  -ms-transform: rotateY(180deg);
+  -o-transform: rotateY(180deg);
+  transform: rotateY(180deg);
+}
+.album.flip .front .alpha {
+  opacity: 1;
+}
+.album.flip .back {
+  z-index: 2;
+  opacity: 1;
+  -webkit-transform: rotateY(0deg);
+  -moz-transform: rotateY(0deg);
+  -ms-transform: rotateY(0deg);
+  -o-transform: rotateY(0deg);
+  transform: rotateY(0deg);
+}
+
+
+pre {
+  overflow: scroll;
+  white-space: pre;
+  word-wrap: normal;
+}
+
+.album {
+  width: 50%;
+  -webkit-text-size-adjust: none;
+}
+@media screen and (min-width: 300px) {
+  .album h1, .album h2, .album h3 {
+    font-size: 13px;
+    line-height: 1em;
+  }
+}
+@media screen and (min-width: 600px) {
+  .album h1, .album h2, .album h3 {
+    font-size: 25px;
+    line-height: 1em;
+  }
+}
+@media screen and (min-width: 900px) {
+  .album {
+    width: 33%;
+  }
+  .album h1, .album h2, .album h3 {
+    font-size: 15px;
+    line-height: 1em;
+  }
+}
+@media screen and (min-width: 1200px) {
+  .album {
+    width: 20%;
+  }
+}
+@media screen and (max-width: 400px) {
+  .phone-hide {
+    display: none;
+  }
+}
+
+.phone-show {
+  display: none;
+}
+@media screen and (max-width: 400px) {
+  .phone-show {
+    display: inline;
+  }
+}
+</style>
+
+	<div class="container">
+		<article id="content" class="single" role="main">
+			<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
+			<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
+				<div class="entry-content">
+					<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'daw' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
+					<?php the_content(); ?>
+					<div class="albums"></div>
+				</div>
+			</div>
+			<?php endwhile; ?>
+		</article>
+	</div>
+<?php get_footer(); ?>