From 51f62bf5acedc97354acd250b0eb0511f13c2bfe Mon Sep 17 00:00:00 2001
From: Wesley Moore <wez@wezm.net>
Date: Mon, 1 Mar 2010 07:37:38 +1100
Subject: [PATCH] Simplify sprited thumbnail presentation

A generated style sheet is no longer needed and the HTML makes more sense.
---
 output/css/style.css  |  14 ++---
 output/css/thumbs.css | 120 ------------------------------------------
 output/js/home.js     |  11 ++--
 templates/image.html  |   3 +-
 4 files changed, 16 insertions(+), 132 deletions(-)
 delete mode 100644 output/css/thumbs.css

diff --git a/output/css/style.css b/output/css/style.css
index 1785a6d..24c92d6 100644
--- a/output/css/style.css
+++ b/output/css/style.css
@@ -221,13 +221,15 @@ ul.inline li:first-child {
   margin: 20px 0 0 20px;
   display: block;
   position: relative;
-}
-#flickr a {
   height: 75px;
   width: 75px;
-  background: url(/images/photos.jpg) no-repeat top left;
-  background-position: -75px 0;
-  display: block;
+}
+#flickr li img {
+  position: absolute;
+  top: -75px;
+}
+#flickr li img:hover {
+  top: 0;
 }
 
 /* Search Form //----------------------------------------------------------*/
@@ -294,4 +296,4 @@ ul.inline li:first-child {
 /*  margin-top: -3px;*/
 	padding-bottom: 10px;
 	font-size: 14px;
-}
\ No newline at end of file
+}
diff --git a/output/css/thumbs.css b/output/css/thumbs.css
deleted file mode 100644
index d8be37d..0000000
--- a/output/css/thumbs.css
+++ /dev/null
@@ -1,120 +0,0 @@
-#flickr li.t1 a {
-  background-position: -75px -75px;
-}
-#flickr li.t1 a:hover {
-  background-position: -75px 0;
-}
-#flickr li.t2 a {
-  background-position: -150px -75px;
-}
-#flickr li.t2 a:hover {
-  background-position: -150px 0;
-}
-#flickr li.t3 a {
-  background-position: -225px -75px;
-}
-#flickr li.t3 a:hover {
-  background-position: -225px 0;
-}
-#flickr li.t4 a {
-  background-position: -300px -75px;
-}
-#flickr li.t4 a:hover {
-  background-position: -300px 0;
-}
-#flickr li.t5 a {
-  background-position: -375px -75px;
-}
-#flickr li.t5 a:hover {
-  background-position: -375px 0;
-}
-#flickr li.t6 a {
-  background-position: -450px -75px;
-}
-#flickr li.t6 a:hover {
-  background-position: -450px 0;
-}
-#flickr li.t7 a {
-  background-position: -525px -75px;
-}
-#flickr li.t7 a:hover {
-  background-position: -525px 0;
-}
-#flickr li.t8 a {
-  background-position: -600px -75px;
-}
-#flickr li.t8 a:hover {
-  background-position: -600px 0;
-}
-#flickr li.t9 a {
-  background-position: -675px -75px;
-}
-#flickr li.t9 a:hover {
-  background-position: -675px 0;
-}
-#flickr li.t10 a {
-  background-position: -750px -75px;
-}
-#flickr li.t10 a:hover {
-  background-position: -750px 0;
-}
-#flickr li.t11 a {
-  background-position: -825px -75px;
-}
-#flickr li.t11 a:hover {
-  background-position: -825px 0;
-}
-#flickr li.t12 a {
-  background-position: -900px -75px;
-}
-#flickr li.t12 a:hover {
-  background-position: -900px 0;
-}
-#flickr li.t13 a {
-  background-position: -975px -75px;
-}
-#flickr li.t13 a:hover {
-  background-position: -975px 0;
-}
-#flickr li.t14 a {
-  background-position: -1050px -75px;
-}
-#flickr li.t14 a:hover {
-  background-position: -1050px 0;
-}
-#flickr li.t15 a {
-  background-position: -1125px -75px;
-}
-#flickr li.t15 a:hover {
-  background-position: -1125px 0;
-}
-#flickr li.t16 a {
-  background-position: -1200px -75px;
-}
-#flickr li.t16 a:hover {
-  background-position: -1200px 0;
-}
-#flickr li.t17 a {
-  background-position: -1275px -75px;
-}
-#flickr li.t17 a:hover {
-  background-position: -1275px 0;
-}
-#flickr li.t18 a {
-  background-position: -1350px -75px;
-}
-#flickr li.t18 a:hover {
-  background-position: -1350px 0;
-}
-#flickr li.t19 a {
-  background-position: -1425px -75px;
-}
-#flickr li.t19 a:hover {
-  background-position: -1425px 0;
-}
-#flickr li.t20 a {
-  background-position: -1500px -75px;
-}
-#flickr li.t20 a:hover {
-  background-position: -1500px 0;
-}
diff --git a/output/js/home.js b/output/js/home.js
index 6d4870e..556b54f 100644
--- a/output/js/home.js
+++ b/output/js/home.js
@@ -1,21 +1,22 @@
 jQuery(function () {
   function render_image(o) {
     return '<li>\n\
-    <a href="' + (Mojo.escape(Mojo.normalize(o.href))) + '" rel="' + (Mojo.escape(Mojo.normalize(o.rel))) + '"></a>\n\
-    </li>';
+  <a href="' + (Mojo.escape(Mojo.normalize(o.href))) + '" rel="prettyPhoto[flickr]"><img src="' + (Mojo.escape(Mojo.normalize(o.src))) + '" alt="' + (Mojo.escape(Mojo.normalize(o.alt))) + '" /></a>\n\
+</li>';
   };
 
   function populate_flickr(data, text_status) {
     var ul = $("ul", "#flickr");
-    // ul.empty();
+    ul.empty();
     jQuery.each($('photo', data), function(i, obj) {
       var photo = $(obj);
       var image = {
         href: photo.attr('url_m'),
-        rel: "prettyPhoto[flickr]",
+        src: '/images/photos.jpg',
+        alt: photo.attr('title'),
       };
       var li = $(render_image(image));
-      $('a', li).css({backgroundPosition: (i + 1) * -75 + "px -75px"});
+      $('img', li).css({left: (i * -75) + 'px'});
       ul.append(li);
     });
     $("a[rel^='prettyPhoto']").prettyPhoto({theme: "facebook"});
diff --git a/templates/image.html b/templates/image.html
index bc0040d..eae92a2 100644
--- a/templates/image.html
+++ b/templates/image.html
@@ -1,3 +1,4 @@
 <li>
-  <a href="{{href}}" rel="{{rel}}"></a>
+  <a href="{{href}}" rel="prettyPhoto[flickr]"><img src="{{src}}" alt="{{alt}}" /></a>
 </li>
+