+body {text-align: center;}
-h1 {
- color:red;
- margin: 1em 0;
- text-align: center;
+footer {
+ border-top: 1px solid grey;
+ color: #333;
}
-body {
- background-color: black;
- color: #eee;
+
+.copyright {
+ color: #555;
+ float:right;
}
.permalink {
- float:right;
- color: #eee;
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ color: #333;
padding-right: 1em;
}
+.tagsearch {
+ text-align: left;
+ padding-left: 50px;
+}
+
+.tagsearch p { margin-top: 3px;}
+
+
+h1 { padding-top: 1em;}
+
a[visited]{ color: #aaa;}
nav {
}
.pics img {
- border: 1px solid white;
margin: 2px;
height: 100px;
}
img.current {
position:relative;
- top:1px;
- border: 1px solid white;
+ border: 2px solid black;
}
.pics img.large{
- border: 1px solid white;
- margin: 2px;
height: 500px;
}
-footer {
- border-top: 1px solid grey;
- color: #eee;
-}
-
-.copyright {
- color: #999;
- float:right;
-}
-
.debug { position: absolute; top:0; left:0}
.singlepic {
position: relative;
display: inline-block;
+ height: 500px;
+}
+
+.singlepic img.large, .singlepic .left, .singlepic .right {
+ display: inline;
}
.singlepic:hover .left, .singlepic:hover .right {
- display: inline-block;
opacity: 0.6;
}
-.singlepic .left img, .singlepic .right img {
- position: absolute;
- top: 50%;
- width: 50px;
- height: 50px;
- margin-top: -25px;
- border: 0px solid white;
+.singlepic .left:hover, .singlepic .right:hover {
+ opacity: 0.95;
}
-.singlepic .left, .singlepic .right {
- display: none;
- height: 500px;
- width: 50px;
- z-index:2;
- opacity: 0.0;
-}
-.singlepic .left {
- position: absolute;
- left: 3px;
- top: 3px;
-}
-.singlepic .right {
+.singlepic img.left , .singlepic img.right {
position: relative;
- left: -56px;
- top: -3px;
+ top: 0%;
+ width: 50px;
+ height: 50px;
+ margin-top: 50px;
+ border: 0px solid white;
}
-.singlepic .left:hover, .singlepic .right:hover {
- opacity: 0.95;
-}
}
else if (isset($_REQUEST["NP"]))
{
- /* get +- 5 pics from ordered list to show next to a large image */
+ /* get +- 3 pics from ordered list to show next to a large image */
/* first create a temp table with all images and then use rowid to get +-5 images */
{
$ID=intval($_REQUEST["ID"]);
$result = $DB->query("SELECT * FROM NEXTPREV".
- " WHERE rowid > (select rowid from NEXTPREV where id=$ID) -5".
- " AND rowid < (select rowid from NEXTPREV where id=$ID) +5");
+ " WHERE rowid > (select rowid from NEXTPREV where id=$ID) -3".
+ " AND rowid < (select rowid from NEXTPREV where id=$ID) +3");
}
else
{
<!DOCTYPE html>
<html>
<head>
+<meta charset="utf-8">
<title><?php echo htmlspecialchars($title) ?></title>
<script src = "<?php echo $webbase.autoversion("/js/d3.min.js")?>"></script>
-<link rel="stylesheet" type="text/css" href="<?php echo $webbase.autoversion("/css/style.css")?>" />
<link rel="stylesheet" type="text/css" href="<?php echo $webbase.autoversion("/css/bootstrap.min.css")?>" />
+<link rel="stylesheet" type="text/css" href="<?php echo $webbase.autoversion("/css/style.css")?>" />
</head>
<body>
<div class="tagsearch">
<form class="form-search" method="get" action="">
- Search for tag: <input list="MyTags" id="MyTagsInput" type="text" value="" />
+ <label>Search for tag:</label> <input class="input-medium search-query" list="MyTags" id="MyTagsInput" type="text" value="" />
<datalist id="MyTags">
</datalist>
+ <p> Current tags:<span id="currenttags"></span>
+ <button class="next btn btn-small btn-info" onclick="tagcloud()">tag cloud</button>
+ <a class="btn btn-small btn-success" href='<?php echo $webbase?>'>all</a>
+ </p>
</form>
- Current tags:<span id="currenttags"></span>
- <button class="next" type="button" onclick="tagcloud()">tag cloud</button>
- <button class="all" onclick="document.location.href='<?php echo $webbase?>'">all</button>
</div>
<div class="nextprev"> <ul></ul></div>
d3.select('form').attr("action",webbase+"/tag/"+document.getElementById('MyTagsInput').value.replace(" ","+"));
});
+ d3.select("#currenttags").select("button").remove();
if (T!="")
{
var mycurrenttags = T.split(",");
- d3.select("#currenttags").select("button").remove();
d3.select("#currenttags").selectAll("button")
.data(mycurrenttags).enter()
- .append("button").attr("type","button").text( function(d) {return d;} );
- }
- else
- {
- d3.select("#currenttags").select("button").remove();
- d3.select("#currenttags").append("span").text( ' none');
+ .append("button").attr("class","btn btn-small").text( function(d) {return d;} );
};
}
if (ID>=0)
{
var singlepicspace=pics.selectAll("li").data(picdata, function(d){return ID;}).enter().append("li").append("div").attr("class","singlepic");
- singlepicspace.append("div").attr("class","left").append("img").attr("src",webbase+"/icons/left.png");
+ singlepicspace.append("img").attr("class","left").attr("src",webbase+"/icons/left.png");
singlepicspace.append("img")
.attr("class","large")
.attr("src",function(d) {
s = s.replace('file:\/\/'+dbprefix,webbase+'/Photos-small/');
return s;
});
- singlepicspace.append("div").attr("class","right").append("img").attr("src",webbase+"/icons/right.png");
+ singlepicspace.append("img").attr("class","right").attr("src",webbase+"/icons/right.png");
update_thumbnails();
}
var thumbs= d3.select(".nextprev").select("ul").selectAll("li").data(json2, function(d) {return d.id;});
+ thumbs.exit().select("img").transition().duration(1000).style("height","0px").transition().duration(1050).remove();
+ thumbs.exit().transition().duration(1050).remove();
thumbs.enter().append("li")
.append("a")
.on("click", function(d) {
s = s.replace('file:\/\/'+dbprefix,webbase+'/Photos-tiny/');
return s;
})
- .style("height","0")
- .transition().duration(1000)
+ .style("height","0px")
+ .transition().duration(500)
.style("height","100px");
- thumbs.exit().select("img").transition().duration(1000).style("height","0");
- thumbs.exit().transition().duration(1050).remove();
-
/* resort elements */
d3.select(".nextprev").select("ul").selectAll("li").sort(function(a,b){return a.id-b.id;});
- d3.select(".nextprev").select("ul").selectAll("li").select("a").select("img").classed("current",false);
d3.select(".nextprev").select("ul").selectAll("li").select("a").select("img").classed("current",function(d){return (d.id==IDcurr);});
mydata.push('{ page:'+(n+1)+', name:"'+(n+1)+'"}');
mydata.push('{ page:'+(n+2.1)+', name:"Next"}');
- };
+ }
+ else
+ {
+ mydata.push('{ page:0.1, name:"Prev"}');
+ mydata.push('{ page:1.1, name:"Next"}');
+ }
+
mydata = "["+mydata.join(",")+"]";
mydata = eval('(' + mydata + ')');
projects / photo-tags.git / commitdiff
