Implement #28 - Lightbox for cover art

public/templates/albums/show.html

@@ -33,7 +33,7 @@
 
     <div class="stretch-to-bottom details-columns">
         <div class="right">
-            <img class="cover" pfm-src-loader="album.covers.normal" pfm-src-size="normal" />
+            <img colorbox pfm-href-loader="album.covers.normal"  class="cover" pfm-src-loader="album.covers.normal" pfm-src-size="normal" />
 
             <div class="share-buttons" pfm-share-buttons>
                 <a class="tumblr" bo-href="album.share.tumblrUrl" title="Share on Tumblr" style="display:inline-block; overflow:hidden; width:20px; height:20px; background:url('/images/tumblr-share.png') top left no-repeat transparent;"></a>

public/templates/playlists/show.html

@@ -32,7 +32,7 @@
 
     <div class="stretch-to-bottom details-columns">
         <div class="right">
-            <img class="cover" pfm-src-loader="playlist.covers.normal" pfm-src-size="normal" />
+            <a href=""><img colorbox pfm-href-loader="playlist.covers.normal" class="cover" pfm-src-loader="playlist.covers.normal" pfm-src-size="normal" /></a>
 
             <div class="share-buttons" pfm-share-buttons>
                 <a class="tumblr" bo-href="playlist.share.tumblrUrl" title="Share on Tumblr" style="display:inline-block; overflow:hidden; width:20px; height:20px; background:url('/images/tumblr-share.png') top left no-repeat transparent;"></a>

public/templates/tracks/show.html

@@ -52,7 +52,7 @@
 
     <div class="stretch-to-bottom details-columns">
         <div class="right">
-            <img class="cover" pfm-src-loader="track.covers.normal" pfm-src-size="normal" />
+			<a href=""><img colorbox pfm-href-loader="track.covers.normal" class="cover" pfm-src-loader="track.covers.normal" pfm-src-size="normal" /></a>
 
             <div class="share-buttons" pfm-share-buttons>
                 <a class="tumblr" bo-href="track.share.tumblrUrl" title="Share on Tumblr" style="display:inline-block; overflow:hidden; width:20px; height:20px; background:url('/images/tumblr-share.png') top left no-repeat transparent;"></a>

resources/assets/scripts/app/directives/colorbox.coffee

@@ -0,0 +1,24 @@
+# Pony.fm - A community for pony fan music.
+# Copyright (C) 2015 Peter Deltchev
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+`angular.module('ponyfm').directive('colorbox', function() {
+  return {   
+    restrict: 'AC',    
+    link: function (scope, element, attrs) {        
+      $(element).colorbox(attrs.colorbox);     
+    }
+  };  
+});` 

resources/assets/scripts/app/directives/href-loader.coffee

@@ -0,0 +1,36 @@
+# Pony.fm - A community for pony fan music.
+# Copyright (C) 2015 Peter Deltchev
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+angular.module('ponyfm').directive 'pfmHrefLoader', () ->
+    (scope, element, attrs) ->
+        size = attrs.pfmSrcSize || 'normal'
+
+        update = (val) ->
+            element.attr 'href', '/images/icons/loading_' + size + '.png'
+			
+            image = element.clone()
+            image.removeAttr 'pfm-href-loader'
+            image.removeAttr 'pfm-src-size'
+
+            element.attr 'href', val
+            element.css {opacity: 0}
+            element.animate {opacity: 1}, 250
+
+            image[0].href = val
+
+        update scope.$eval attrs.pfmHrefLoader
+
+        scope.$watch attrs.pfmHrefLoader, update