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("thmb", new Integer(250));
|
||||
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);
|
||||
} catch (Exception 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>
|
||||
|
|
@ -80,10 +80,10 @@
|
|||
|
||||
$(function() {
|
||||
|
||||
function formatTitle(title, currentArray, currentIndex, currentOpts) {
|
||||
var captionElement = document.getElementById(title);
|
||||
return captionElement.innerHTML;
|
||||
}
|
||||
function formatTitle(title, currentArray, currentIndex, currentOpts) {
|
||||
var captionElement = document.getElementById(title);
|
||||
return captionElement.innerHTML;
|
||||
}
|
||||
|
||||
function scale(w, h, max) {
|
||||
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);
|
||||
|
||||
|
|
@ -116,7 +116,7 @@ $(function() {
|
|||
|
||||
var element = gridDiv.filter("a.ss");
|
||||
|
||||
//$("<p>" + entry.type + "</p>").appendTo("#dbg");
|
||||
$("<p>" + entry.type + "</p>").appendTo("#dbg");
|
||||
|
||||
switch (entry.type) {
|
||||
case "movie":
|
||||
|
|
@ -172,6 +172,9 @@ $(function() {
|
|||
'href' : $("#ent" + idx).href
|
||||
});
|
||||
break;
|
||||
case "dir":
|
||||
$("#ent" + idx).attr("href", entry.name + ".album");
|
||||
break;
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -199,7 +202,8 @@ $(function() {
|
|||
</head>
|
||||
<body>
|
||||
<form method="get"><input name="q" value=""></form>
|
||||
<h1 id="name">2001-12-santabarbara</h1>
|
||||
<h1 id="name">2008</h1>
|
||||
<hr/>
|
||||
<div id="dbg"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue