knut/album
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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.

Browse source
This commit is contained in:
Knut Forkalsrud 2010-08-18 21:48:00 -07:00
parent b19fae9f12
commit 0fe2667b30
3 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
photos/album.properties
View file

@ -1,5 +1,5 @@
file.l1000729.jpg.caption=Test caption! file.l1000729.jpg.caption=Test caption!
file.IMG_0139.JPG.hidden=false 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 dir.portraits.hidden=false
sort=date desc sort=date desc

4
src/main/java/org/forkalsrud/album/web/AlbumServlet.java
View file

@ -216,7 +216,7 @@ public class AlbumServlet
try { try {
res.setContentType("text/html"); res.setContentType("text/html");
req.setAttribute("entry", entry); 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"); RequestDispatcher rd = req.getRequestDispatcher("/WEB-INF/velocity/photo.vm");
rd.forward(req, res); rd.forward(req, res);
} catch (Exception ex) { } catch (Exception ex) {
@ -229,7 +229,7 @@ public class AlbumServlet
res.setContentType("text/html"); res.setContentType("text/html");
req.setAttribute("entry", entry); req.setAttribute("entry", entry);
req.setAttribute("thmb", new Integer(250)); 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"); RequestDispatcher rd = req.getRequestDispatcher("/WEB-INF/velocity/photo.vm");
rd.forward(req, res); rd.forward(req, res);
} catch (Exception e) { } catch (Exception e) {

12
src/main/webapp/WEB-INF/velocity/photo.vm
View file

@ -72,12 +72,18 @@
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
function formatTitle(title, currentArray, currentIndex, currentOpts) {
var captionElement = document.getElementById(title);
return captionElement.innerHTML;
}
$("a.ss").fancybox({ $("a.ss").fancybox({
'titlePosition' : 'inside', 'titlePosition' : 'inside',
'transitionIn' : 'elastic', 'transitionIn' : 'elastic',
'transitionOut' : 'elastic', 'transitionOut' : 'elastic',
'easingIn' : 'easeInQuad', 'easingIn' : 'easeInQuad',
'easingOut' : 'easeOutQuad' 'easingOut' : 'easeOutQuad',
'titleFormat' : formatTitle
}); });
}) })
</script> </script>
@ -101,11 +107,11 @@ $(document).ready(function() {
<div class="grid"> <div class="grid">
<span class="name">$en.name</span><br/> <span class="name">$en.name</span><br/>
#if($en.isFile()) #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 #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> <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 #end
<p class="caption">$!en.caption</p> <p id="${en.name}" class="caption">$!en.caption</p>
</div> </div>
#end #end
</body> </body>