From 0fe2667b307a64afe604d4e69e4f7ecf9ef5ba34 Mon Sep 17 00:00:00 2001
From: Knut Forkalsrud <knut@forkalsrud.org>
Date: Wed, 18 Aug 2010 21:48:00 -0700
Subject: [PATCH] Make use of the caption element to provide the "title" for
 the fancybox.  Better that duplicating the data, and it also allows for HTML
 elements within the caption.

---
 photos/album.properties                              |  2 +-
 .../java/org/forkalsrud/album/web/AlbumServlet.java  |  4 ++--
 src/main/webapp/WEB-INF/velocity/photo.vm            | 12 +++++++++---
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/photos/album.properties b/photos/album.properties
index b7d525a..3329897 100644
--- a/photos/album.properties
+++ b/photos/album.properties
@@ -1,5 +1,5 @@
 file.l1000729.jpg.caption=Test caption!
 file.IMG_0139.JPG.hidden=false
-file.fra_jakt.jpg.caption: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+file.fra_jakt.jpg.caption: Lorem ipsum "dolor sit amet", consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 dir.portraits.hidden=false
 sort=date desc
diff --git a/src/main/java/org/forkalsrud/album/web/AlbumServlet.java b/src/main/java/org/forkalsrud/album/web/AlbumServlet.java
index 5f07a52..56c859d 100644
--- a/src/main/java/org/forkalsrud/album/web/AlbumServlet.java
+++ b/src/main/java/org/forkalsrud/album/web/AlbumServlet.java
@@ -216,7 +216,7 @@ public class AlbumServlet
         try {
             res.setContentType("text/html");
             req.setAttribute("entry", entry);
-            req.setAttribute("thmb", new Integer(640));
+            req.setAttribute("thmb", new Integer(800));
             RequestDispatcher rd = req.getRequestDispatcher("/WEB-INF/velocity/photo.vm");
             rd.forward(req, res);
         } catch (Exception ex) {
@@ -229,7 +229,7 @@ public class AlbumServlet
             res.setContentType("text/html");
             req.setAttribute("entry", entry);
             req.setAttribute("thmb", new Integer(250));
-            req.setAttribute("full", new Integer(640));
+            req.setAttribute("full", new Integer(800));
             RequestDispatcher rd = req.getRequestDispatcher("/WEB-INF/velocity/photo.vm");
             rd.forward(req, res);
         } catch (Exception e) {
diff --git a/src/main/webapp/WEB-INF/velocity/photo.vm b/src/main/webapp/WEB-INF/velocity/photo.vm
index a2a4fd3..b735121 100644
--- a/src/main/webapp/WEB-INF/velocity/photo.vm
+++ b/src/main/webapp/WEB-INF/velocity/photo.vm
@@ -72,12 +72,18 @@
 <script type="text/javascript">
 $(document).ready(function() {
 
+  function formatTitle(title, currentArray, currentIndex, currentOpts) {
+    var captionElement = document.getElementById(title);
+    return captionElement.innerHTML;
+  }
+
   $("a.ss").fancybox({
         'titlePosition' : 'inside',
         'transitionIn'  : 'elastic',
         'transitionOut' : 'elastic',
         'easingIn'      : 'easeInQuad',
-        'easingOut'     : 'easeOutQuad'
+        'easingOut'     : 'easeOutQuad',
+        'titleFormat'   : formatTitle
   });
 })
 </script>
@@ -101,11 +107,11 @@ $(document).ready(function() {
   <div class="grid">
     <span class="name">$en.name</span><br/>
 #if($en.isFile())
-    <div class="imgborder"><a class="ss" href="${base}${thpath}?size=${full}" rel="album" #if($en.caption)title="${en.caption}"#end><img class="picture" src="${base}${thpath}?size=${thmb}" border="0" width="${dim.width}" height="${dim.height}"/></a></div>
+    <div class="imgborder"><a class="ss" href="${base}${thpath}?size=${full}" rel="album" title="${en.name}"><img class="picture" src="${base}${thpath}?size=${thmb}" border="0" width="${dim.width}" height="${dim.height}"/></a></div>
 #else
     <div class="imgborder"><a class="dir" href="#navlink($en)" title="$!en.caption"><img class="picture" src="${base}${thpath}?size=${thmb}" border="0" width="${dim.width}" height="${dim.height}"/></a></div>
 #end
-    <p class="caption">$!en.caption</p>
+    <p id="${en.name}" class="caption">$!en.caption</p>
   </div>
 #end
 </body>