diff options
author | Arun Persaud <arun@nubati.net> | 2012-02-06 22:09:34 -0800 |
---|---|---|
committer | Arun Persaud <apersaud@lbl.gov> | 2012-02-06 22:09:34 -0800 |
commit | 4dd37e616478fef02cbcb32049c6b94891a3cf35 (patch) | |
tree | da3ce14d7f3fd5135bed3d916b2684ea20dfadf4 | |
parent | d8bcd598e8ebc02ee3c7e27cd4634bf5678e51f1 (diff) | |
download | photo-tags-4dd37e616478fef02cbcb32049c6b94891a3cf35.tar.gz photo-tags-4dd37e616478fef02cbcb32049c6b94891a3cf35.tar.bz2 photo-tags-4dd37e616478fef02cbcb32049c6b94891a3cf35.zip |
added prev/next arrows on top of single picture
-rw-r--r-- | arrow.svg | 84 | ||||
-rw-r--r-- | index.php | 42 | ||||
-rw-r--r-- | left.png | bin | 0 -> 2792 bytes | |||
-rw-r--r-- | right.png | bin | 0 -> 2807 bytes | |||
-rw-r--r-- | style.css | 43 |
5 files changed, 163 insertions, 6 deletions
diff --git a/arrow.svg b/arrow.svg new file mode 100644 index 0000000..569bda4 --- /dev/null +++ b/arrow.svg @@ -0,0 +1,84 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="744.09448819" + height="1052.3622047" + id="svg2" + version="1.1" + inkscape:version="0.48.2 r9819" + sodipodi:docname="arrow.svg"> + <defs + id="defs4" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="0.91054687" + inkscape:cx="392.32744" + inkscape:cy="487.34844" + inkscape:document-units="px" + inkscape:current-layer="layer1" + showgrid="false" + inkscape:window-width="868" + inkscape:window-height="863" + inkscape:window-x="129" + inkscape:window-y="30" + inkscape:window-maximized="0" /> + <metadata + id="metadata7"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1"> + <g + id="g3776" + inkscape:export-filename="/home/arun/public_html/f-spot-gallery/left.png" + inkscape:export-xdpi="25.40506" + inkscape:export-ydpi="25.40506" + style="stroke:#555753"> + <path + inkscape:export-ydpi="25.40506" + inkscape:export-xdpi="25.40506" + inkscape:export-filename="/home/arun/public_html/f-spot-gallery/left.png" + transform="matrix(0.9625,0,0,0.9625,11.943368,14.327589)" + d="m 494.2085,484.57153 c 0,48.52335 -39.33594,87.85929 -87.85929,87.85929 -48.52334,0 -87.85929,-39.33594 -87.85929,-87.85929 0,-48.52334 39.33595,-87.85929 87.85929,-87.85929 48.52335,0 87.85929,39.33595 87.85929,87.85929 z" + sodipodi:ry="87.859291" + sodipodi:rx="87.859291" + sodipodi:cy="484.57153" + sodipodi:cx="406.34921" + id="path2985" + style="color:#000000;fill:#ffffff;fill-opacity:0.70588235;stroke:#555753;stroke-width:8.31168842;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" + sodipodi:type="arc" /> + <path + inkscape:export-ydpi="25.40506" + inkscape:export-xdpi="25.40506" + inkscape:export-filename="/home/arun/public_html/f-spot-gallery/left.png" + sodipodi:nodetypes="ccc" + inkscape:connector-curvature="0" + id="path2987" + d="m 439.29644,430.75772 -72.48391,49.96997 72.48391,49.96997" + style="color:#000000;fill:none;stroke:#555753;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + </g> + </g> +</svg> @@ -125,15 +125,16 @@ function load_content(a) { /* if ID is set, just show one pictures, else create an array of pictures */ if (ID>=0) { - pics.selectAll("li").data(picdata) - .enter().append("li") - .append("img") + var singlepicspace=pics.selectAll("li").data(picdata).enter().append("li").append("div").attr("class","singlepic"); + singlepicspace.append("div").attr("class","left").append("img").attr("src","<?php echo $webbase?>/left.png"); + singlepicspace.append("img") .attr("class","large") .attr("src",function(d) { s= d.base_uri+'/'+d.filename; s = s.replace('file:\/\/<?php echo "".str_replace("/","\/",$dbprefix); ?>','<?php echo $webbase?>/Photos-small/'); return s; }); + singlepicspace.append("div").attr("class","right").append("img").attr("src","<?php echo $webbase?>/right.png"); /* update thumbnails */ if(T!="") @@ -141,6 +142,9 @@ function load_content(a) { else url2 = "<?php echo $webbase?>/getjson.php?NP=1&ID="+ID; + var IDprev=-1; + var IDnext=-1; + var IDcurr=-1; d3.json(url2, function(json2) { var thumbs= d3.select(".nextprev").select("ul").selectAll("li").data(json2); thumbs.enter().append("li") @@ -150,6 +154,14 @@ function load_content(a) { if(T!="") s = s + '/tag/' + T; s = s + '/pic/' + d.id; + + if( IDcurr != ID ) + { + IDprev = IDcurr; + IDcurr = IDnext; + IDnext = d.id; + } + return s; }) .append("img") @@ -161,6 +173,22 @@ function load_content(a) { thumbs.exit().remove(); + if (IDprev != -1 ) + { + s = '<?php echo $webbase; ?>'; + if(T!="") + s = s + '/tag/' + T; + s = s + '/pic/' + IDprev; + d3.select(".left").on("click", function(d) { document.location.href=s }) + } + if (IDnext != -1 ) + { + s = '<?php echo $webbase; ?>'; + if(T!="") + s = s + '/tag/' + T; + s = s + '/pic/' + IDnext; + d3.select(".right").on("click", function(d) { document.location.href=s }) + } }); } @@ -250,11 +278,15 @@ function checkbutton() function update_page_index(mypage) { /* load number of pictures */ + + myID = ""; + if(ID > 0) + myID = "&ID="+ID; if(T!="") - url = "<?php echo $webbase?>/getjson.php?C=1&T="+T; + url = "<?php echo $webbase?>/getjson.php?C=1&T="+T+myID; else - url = "<?php echo $webbase?>/getjson.php?C=1"; + url = "<?php echo $webbase?>/getjson.php?C=1"+myID; d3.json(url, function(json) { /* update index, show only page +-5 pages max */ diff --git a/left.png b/left.png Binary files differnew file mode 100644 index 0000000..c55bbf2 --- /dev/null +++ b/left.png diff --git a/right.png b/right.png Binary files differnew file mode 100644 index 0000000..d606e36 --- /dev/null +++ b/right.png @@ -59,4 +59,45 @@ footer { } .nextprev ul li img { padding-right: 5px; -}
\ No newline at end of file +} + +.singlepic { + position: relative; + display: inline-block; +} + +.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, .singlepic .right { + display: none; + height: 500px; + width: 50px; + z-index:2; + opacity: 0.0; +} +.singlepic .left { + position: absolute; + left: 3px; + top: 3px; +} +.singlepic .right { + position: relative; + left: -56px; + top: -3px; +} + +.singlepic .left:hover, .singlepic .right:hover { + opacity: 0.95; +} |