make "dynamic.html" the default behavior
This commit is contained in:
parent
46094b5c1e
commit
b3a370fc11
3 changed files with 224 additions and 11 deletions
|
|
@ -288,7 +288,8 @@ public class AlbumServlet
|
||||||
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(800));
|
req.setAttribute("full", new Integer(800));
|
||||||
RequestDispatcher rd = req.getRequestDispatcher("/WEB-INF/velocity/photo.vm");
|
req.setAttribute("D", "$");
|
||||||
|
RequestDispatcher rd = req.getRequestDispatcher("/WEB-INF/velocity/dynamic.vm");
|
||||||
rd.forward(req, res);
|
rd.forward(req, res);
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
throw new RuntimeException("sadness", e);
|
throw new RuntimeException("sadness", e);
|
||||||
|
|
|
||||||
208
src/main/webapp/WEB-INF/velocity/dynamic.vm
Normal file
208
src/main/webapp/WEB-INF/velocity/dynamic.vm
Normal file
|
|
@ -0,0 +1,208 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||||
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||||
|
<meta name="viewport" content="width = 600" />
|
||||||
|
<title>$entry.name</title>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="${assets}/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
|
||||||
|
<script type="text/javascript" src="${assets}/fancybox/jquery.easing-1.3.pack.js"></script>
|
||||||
|
<script type="text/javascript" src="${assets}/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
|
||||||
|
<script type="text/javascript" src="${assets}/flowplayer/flowplayer-3.0.3.min.js"></script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="${assets}/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
|
||||||
|
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
body {
|
||||||
|
font-size: 11px;
|
||||||
|
font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif;
|
||||||
|
color: #6d6d6d;
|
||||||
|
background: #acc95f;
|
||||||
|
margin: 10px auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
form {
|
||||||
|
float: right;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
margin-left: 30px;
|
||||||
|
text-align: left;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
a:link, a:visited {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #4c4c4c;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
a:hover, a:focus {
|
||||||
|
text-decoration: underline;
|
||||||
|
color: #6a6a6a;
|
||||||
|
}
|
||||||
|
div.photo {
|
||||||
|
align: center;
|
||||||
|
height: 200px;
|
||||||
|
margin 8px;
|
||||||
|
}
|
||||||
|
div.grid {
|
||||||
|
float: left;
|
||||||
|
#set($divheight = $thmb + 60)
|
||||||
|
#set($divwidth = $thmb + 25)
|
||||||
|
height: ${divheight}px;
|
||||||
|
max-height: ${divheight}px;
|
||||||
|
max-width: ${divwidth}px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
img.picture {
|
||||||
|
box-shadow: 5px 5px 5px #777;
|
||||||
|
-webkit-box-shadow: 5px 5px 5px #777;
|
||||||
|
-moz-box-shadow: 5px 5px 5px #777;
|
||||||
|
}
|
||||||
|
div.imgborder {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
.nav {
|
||||||
|
border: 0 none;
|
||||||
|
padding: 0px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
#fancybox-left, #fancybox-right {
|
||||||
|
bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
$D(function() {
|
||||||
|
|
||||||
|
function formatTitle(title, currentArray, currentIndex, currentOpts) {
|
||||||
|
var captionElement = document.getElementById(title);
|
||||||
|
return captionElement.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
function scale(w, h, max) {
|
||||||
|
if (w > h) {
|
||||||
|
return { w : Math.floor(max), h: Math.floor((max * h + max / 2) / w) };
|
||||||
|
} else {
|
||||||
|
return { w: Math.floor((max * w + max / 2) / h), h: Math.floor(max) };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
${D}.getJSON("${entry.name}" + '.json', function(data, textStatus) {
|
||||||
|
|
||||||
|
$D("#name").html(data.name);
|
||||||
|
|
||||||
|
var thmb = 250;
|
||||||
|
var picSize = 800;
|
||||||
|
var movieSize = 640;
|
||||||
|
|
||||||
|
${D}.each(data.contents, function(idx, entry) {
|
||||||
|
|
||||||
|
var dim = scale(entry.width, entry.height, thmb);
|
||||||
|
|
||||||
|
var gridDiv = $("<div class=\"grid\">\n"
|
||||||
|
+ " <span class=\"name\">" + entry.name + "</span><br/>\n"
|
||||||
|
+ " <div class=\"imgborder\"><a class=\"ss\" id=\"ent" + idx + "\" href=\"${base}" + entry.path + "?size=" + picSize + "\" title=\"" + entry.name + "\">"
|
||||||
|
+ "<img class=\"picture\" src=\"${base}" + (entry.type == "movie" ? entry.path + ".frame" : entry.path) + "?size=" + thmb + "\" border=\"0\" width=\"" + dim.w + "\" height=\"" + dim.h + "\"/></a></div>\n"
|
||||||
|
+ "<p id=\"" + entry.name + "\" class=\"caption\"></p>\n"
|
||||||
|
+ "</div>\n");
|
||||||
|
gridDiv.appendTo('body');
|
||||||
|
|
||||||
|
var element = gridDiv.filter("a.ss");
|
||||||
|
|
||||||
|
// $D("<p>" + entry.type + "</p>").appendTo("#dbg");
|
||||||
|
|
||||||
|
switch (entry.type) {
|
||||||
|
case "movie":
|
||||||
|
var size = scale(entry.width, entry.height, movieSize);
|
||||||
|
var href = "${base}" + escape(entry.path) + ".movie?size=" + movieSize;
|
||||||
|
$D("#ent" + idx).attr("rel", "album").attr("href", href).fancybox({
|
||||||
|
'titlePosition' : 'inside',
|
||||||
|
'transitionIn' : 'elastic',
|
||||||
|
'transitionOut' : 'elastic',
|
||||||
|
'easingIn' : 'easeInQuad',
|
||||||
|
'easingOut' : 'easeOutQuad',
|
||||||
|
'titleFormat' : formatTitle,
|
||||||
|
'padding' : 0,
|
||||||
|
'href' : "${assets}/flowplayer/flowplayer-3.0.3.swf",
|
||||||
|
'width' : size.w,
|
||||||
|
'height' : size.h,
|
||||||
|
'type' : 'swf',
|
||||||
|
'swf' : {
|
||||||
|
'allowfullscreen' : 'true',
|
||||||
|
'wmode' : 'transparent',
|
||||||
|
'flashvars':
|
||||||
|
"config={\
|
||||||
|
'clip': {\
|
||||||
|
'url': '" + href + "'\
|
||||||
|
},\
|
||||||
|
'plugins': {\
|
||||||
|
'controls': {\
|
||||||
|
'url': '${assets}/flowplayer/flowplayer.controls-3.0.3.swf',\
|
||||||
|
'backgroundColor': 'transparent',\
|
||||||
|
'progressColor': 'transparent',\
|
||||||
|
'bufferColor': 'transparent',\
|
||||||
|
'play':true,\
|
||||||
|
'fullscreen':true,\
|
||||||
|
'autoHide': 'always'\
|
||||||
|
}\
|
||||||
|
}\
|
||||||
|
}"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "image":
|
||||||
|
var largeDim = scale(entry.width, entry.height, picSize);
|
||||||
|
$D("#ent" + idx).attr("rel", "album").fancybox({
|
||||||
|
'titlePosition' : 'inside',
|
||||||
|
'transitionIn' : 'elastic',
|
||||||
|
'transitionOut' : 'elastic',
|
||||||
|
'easingIn' : 'easeInQuad',
|
||||||
|
'easingOut' : 'easeOutQuad',
|
||||||
|
'titleFormat' : formatTitle,
|
||||||
|
'width' : largeDim.w,
|
||||||
|
'height' : largeDim.h,
|
||||||
|
'type' : "image",
|
||||||
|
'href' : $("#ent" + idx).href
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "dir":
|
||||||
|
$D("#ent" + idx).attr("href", "${entry.name}/" + entry.name + ".album");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
var selectedImg = window.location.search;
|
||||||
|
var selectedPos = undefined;
|
||||||
|
if (/^\?focus=/.test(selectedImg)) {
|
||||||
|
selectedImg = selectedImg.substring('?focus='.length);
|
||||||
|
$D("a.ss").each(function(index) {
|
||||||
|
if (selectedImg == $(this).attr("title")) {
|
||||||
|
selectedPos = index;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectedPos !== undefined) {
|
||||||
|
$D(gallery[selectedPos]).trigger('click');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<form action="${base}/search" method="get"><input name="q" value="$!search"></form>
|
||||||
|
#macro(navlink $entry)${base}$mapper.map(${entry.getPath()}).#if($entry.isFile())photo#{else}album#end#end
|
||||||
|
#macro(navbutton $entry $direction)#if($entry)<a href="#navlink($entry)"><img class="nav" width="26" height="32" src="${assets}/${direction}.png"/></a>#else<img class="nav" width="26" height="32" src="${assets}/${direction}-inactive.png"/>#end#end
|
||||||
|
<h1>#navbutton(${entry.prev()} "left")#navbutton(${entry.parent()} "up")#navbutton(${entry.next()} "right") $entry.name</h1>
|
||||||
|
<hr/>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -75,15 +75,15 @@
|
||||||
#fancybox-left, #fancybox-right {
|
#fancybox-left, #fancybox-right {
|
||||||
bottom: 30px;
|
bottom: 30px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
$(function() {
|
$(function() {
|
||||||
|
|
||||||
function formatTitle(title, currentArray, currentIndex, currentOpts) {
|
function formatTitle(title, currentArray, currentIndex, currentOpts) {
|
||||||
var captionElement = document.getElementById(title);
|
var captionElement = document.getElementById(title);
|
||||||
return captionElement.innerHTML;
|
return captionElement.innerHTML;
|
||||||
}
|
}
|
||||||
|
|
||||||
function scale(w, h, max) {
|
function scale(w, h, max) {
|
||||||
if (w > h) {
|
if (w > h) {
|
||||||
|
|
@ -94,7 +94,7 @@ $(function() {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
$.getJSON('album/photos.json', function(data, textStatus) {
|
$.getJSON('album/Photos.json', function(data, textStatus) {
|
||||||
|
|
||||||
$("#name").html(data.name);
|
$("#name").html(data.name);
|
||||||
|
|
||||||
|
|
@ -116,7 +116,7 @@ $(function() {
|
||||||
|
|
||||||
var element = gridDiv.filter("a.ss");
|
var element = gridDiv.filter("a.ss");
|
||||||
|
|
||||||
//$("<p>" + entry.type + "</p>").appendTo("#dbg");
|
$("<p>" + entry.type + "</p>").appendTo("#dbg");
|
||||||
|
|
||||||
switch (entry.type) {
|
switch (entry.type) {
|
||||||
case "movie":
|
case "movie":
|
||||||
|
|
@ -172,6 +172,9 @@ $(function() {
|
||||||
'href' : $("#ent" + idx).href
|
'href' : $("#ent" + idx).href
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
|
case "dir":
|
||||||
|
$("#ent" + idx).attr("href", entry.name + ".album");
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
@ -199,7 +202,8 @@ $(function() {
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<form method="get"><input name="q" value=""></form>
|
<form method="get"><input name="q" value=""></form>
|
||||||
<h1 id="name">2001-12-santabarbara</h1>
|
<h1 id="name">2008</h1>
|
||||||
<hr/>
|
<hr/>
|
||||||
|
<div id="dbg"></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue