--- a/index.php	Thu Oct 30 13:04:29 2014 +0900
+++ b/index.php	Sat Nov 01 17:31:11 2014 +0900
@@ -119,15 +119,9 @@
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>Index of <?php echo h($uri); ?></title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
-  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css">
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/magnific-popup.css">
   <style type="text/css">
-    .lb-data a { color: #ccc; }
-    .lightbox {
-      position: fixed;
-      top: 50px !important;
-    }
-  </style>
-  <style type="text/css">
+    .mfp-content figure { margin: 0; }
     * { box-sizing: border-box; }
     body {
       font-family: Segoe UI, sans-serif;
@@ -202,16 +196,23 @@
     </em>
   </footer>
 
-  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.4/zepto.min.js"></script>
+
+  <script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/jquery.magnific-popup.min.js"></script>
 
   <script>
-    $("table > tbody > tr > td > a").each(function() {
-      if (!this.href.match(/\.(jpe?g|png|gif|webp)$/i)) return
-      var title = this.outerHTML
-      this.setAttribute("data-title", title)
-      this.setAttribute("data-lightbox", "aa")
+    $(document).ready(function() {
+      $("table > tbody > tr > td > a").each(function() {
+        if (!this.href.match(/\.(jpe?g|png|gif|webp)$/i)) return
+        this.className = "image"
+        this.setAttribute("title", this.innerHTML)
+      })
+
+      $("table > tbody").magnificPopup({
+        delegate: "a.image",
+        type: "image",
+        gallery: { enabled: true }
+      })
     })
   </script>
-
-  <script src="//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js"></script>
 </body>