Mercurial > hg > mgallery

changeset 44:bc9da3b71888

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Implement imgur-style image zoom/de-zoom via image click/enter. Might have bugs, probably does not work on mobile.
author Matti Hamalainen <ccr@tnsp.org>
date Thu, 19 May 2016 10:11:32 +0300
parents fc8e6a056016
children d555734526d6
files basic.css mgallery.php
diffstat 2 files changed, 82 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/basic.css	Thu May 12 23:32:21 2016 +0300
+++ b/basic.css	Thu May 19 10:11:32 2016 +0300
@@ -212,3 +212,30 @@
 	border-bottom: 1px solid #787;
 	border-right: 1px solid #787;
 }
+
+
+#imageLarge {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	z-index: 20;
+	display: none;
+	margin: 1em;
+}
+
+#imageLarge img {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	width: auto;
+	height: auto;
+	max-width: 100%;
+	max-height: 100%;
+	margin-left: auto;
+	margin-right: auto;
+	border: 4px solid white;
+}
--- a/mgallery.php	Thu May 12 23:32:21 2016 +0300
+++ b/mgallery.php	Thu May 19 10:11:32 2016 +0300
@@ -367,7 +367,11 @@
 
   $pageTitle = $galTitlePrefix.$galTitleSep.$galData["caption"]." - ".$galImage;
   cmPrintPageHeader($pageTitle);
-  echo "<h1>".chentities($pageTitle)."</h1>\n";
+  echo
+    "<div id=\"imageLarge\"><img src=\"".
+    $galImageURL.$galPath."/".$galImage."\" alt=\"".
+    chentities($data["base"].$galMedSuffix.$data["ext"])."\" /></div>\n".
+    "<h1>".chentities($pageTitle)."</h1>\n";
 
   if ($naviFlags & GNAV_BREADCRUMBS)
     mgPrintBreadCrumbs($galData);
@@ -379,8 +383,8 @@
   "<div class=\"imageCBox\">\n".
   mgGetNaviControlImageBox($galImagesIndex, $index, "prev", -1).
   "<div class=\"imageBox\">\n".
-  "<a target=\"_blank\" href=\"".$galImageURL.$galPath."/".$galImage."\">".
-  "<img src=\"".mgGetImageURL($galTNPath, $data["base"].$galMedSuffix.$data["ext"])."\" alt=\"".
+  "<a id=\"imageLink\" target=\"_blank\" href=\"".$galImageURL.$galPath."/".$galImage."\">".
+  "<img id=\"imageImage\" src=\"".mgGetImageURL($galTNPath, $data["base"].$galMedSuffix.$data["ext"])."\" alt=\"".
   chentities($data["base"].$galMedSuffix.$data["ext"])."\"></a>\n".
   "</div>\n".
   mgGetNaviControlImageBox($galImagesIndex, $index, "next", 1).
@@ -415,8 +419,35 @@
       "<script type=\"text/javascript\">\n".
       "var mgalPrevURL = \"".($prevActive ? $prevURL : "")."\";\n".
       "var mgalNextURL = \"".($nextActive ? $nextURL : "")."\";\n".
+      "var mgalExpanded = false;\n".
       "\n";
 ?>
+function mgalExpandClose(force)
+{
+  mgalExpanded = !mgalExpanded;
+  if (!force)
+    mgalExpanded = false;
+  
+  var mlink = document.getElementById("imageLink");
+  var mlarge = document.getElementById("imageLarge");
+  if (mlink && mlarge)
+  {
+    mlink.style.visibility = mgalExpanded ? "hidden" : "visible";
+    mlarge.style.display = mgalExpanded ? "block" : "none";
+  }
+  return false;
+}
+
+
+function mgalMouseExpandClose(event, force)
+{
+  if (!event.ctrlKey)
+    return mgalExpandClose(force);
+  else
+    return true;
+}
+
+
 function mgalNavigateTo(url)
 {
   if (url != "")
@@ -432,19 +463,40 @@
   {
     case 37:
     case 65:
+    case 52:
       // left
       mgalNavigateTo(mgalPrevURL);
       break;
 
     case 39:
     case 68:
+    case 54:
       // right
       mgalNavigateTo(mgalNextURL);
       break;
+
+    case 13:
+    case 48:
+      mgalExpandClose(true);
+      break;
+
+    case 27:
+      mgalExpandClose(false);
+      break;
+
+    default:
+      return true;
   }
+
+  ev.preventDefault();
+  return false;
 }
 
+
+document.getElementById("imageLarge").onclick = function(event) { return mgalMouseExpandClose(event, false); }
+document.getElementById("imageLink").onclick = function(event) { return mgalMouseExpandClose(event, true); }
 document.onkeypress = mgalProcessKeyPress;
+
 <?
     echo
       "</script>\n";