From 4dd37e616478fef02cbcb32049c6b94891a3cf35 Mon Sep 17 00:00:00 2001 From: Arun Persaud Date: Mon, 6 Feb 2012 22:09:34 -0800 Subject: [PATCH] added prev/next arrows on top of single picture --- arrow.svg | 84 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ index.php | 42 +++++++++++++++++++++++---- left.png | Bin 0 -> 2792 bytes right.png | Bin 0 -> 2807 bytes style.css | 43 +++++++++++++++++++++++++++- 5 files changed, 163 insertions(+), 6 deletions(-) create mode 100644 arrow.svg create mode 100644 left.png create mode 100644 right.png diff --git a/arrow.svg b/arrow.svg new file mode 100644 index 0000000..569bda4 --- /dev/null +++ b/arrow.svg @@ -0,0 +1,84 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/index.php b/index.php index 34efdc4..d178a41 100644 --- a/index.php +++ b/index.php @@ -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","/left.png"); + singlepicspace.append("img") .attr("class","large") .attr("src",function(d) { s= d.base_uri+'/'+d.filename; s = s.replace('file:\/\/','/Photos-small/'); return s; }); + singlepicspace.append("div").attr("class","right").append("img").attr("src","/right.png"); /* update thumbnails */ if(T!="") @@ -141,6 +142,9 @@ function load_content(a) { else url2 = "/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 = ''; + 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 = ''; + 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 = "/getjson.php?C=1&T="+T; + url = "/getjson.php?C=1&T="+T+myID; else - url = "/getjson.php?C=1"; + url = "/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 new file mode 100644 index 0000000000000000000000000000000000000000..c55bbf24ea1fa77ecddb0332ca6a520b5e924e89 GIT binary patch literal 2792 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 literal 0 HcmV?d00001 diff --git a/style.css b/style.css index 75bea14..8b7a7b9 100644 --- a/style.css +++ b/style.css @@ -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; +} -- 2.25.1