Mercurial > dirlist-php
comparison index.php @ 32:986aec12eb7f
Use magnific popup instead of lightbox.
Seems to be a bit better.
| author | edogawaconan <me@myconan.net> |
|---|---|
| date | Sat, 01 Nov 2014 17:31:11 +0900 |
| parents | c482f0db5c28 |
| children | dc464717e028 |
comparison
equal
deleted
inserted
replaced
| 31:73833d29dbad | 32:986aec12eb7f |
|---|---|
| 117 <!doctype html> | 117 <!doctype html> |
| 118 <head> | 118 <head> |
| 119 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> | 119 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> |
| 120 <title>Index of <?php echo h($uri); ?></title> | 120 <title>Index of <?php echo h($uri); ?></title> |
| 121 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> | 121 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> |
| 122 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css"> | 122 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/magnific-popup.css"> |
| 123 <style type="text/css"> | 123 <style type="text/css"> |
| 124 .lb-data a { color: #ccc; } | 124 .mfp-content figure { margin: 0; } |
| 125 .lightbox { | |
| 126 position: fixed; | |
| 127 top: 50px !important; | |
| 128 } | |
| 129 </style> | |
| 130 <style type="text/css"> | |
| 131 * { box-sizing: border-box; } | 125 * { box-sizing: border-box; } |
| 132 body { | 126 body { |
| 133 font-family: Segoe UI, sans-serif; | 127 font-family: Segoe UI, sans-serif; |
| 134 font-size: 14px; | 128 font-size: 14px; |
| 135 } | 129 } |
| 200 Running <a href="https://bitbucket.org/edogawaconan/dirlist-php">dirlist-php <?php echo DL_VERSION ?></a>. | 194 Running <a href="https://bitbucket.org/edogawaconan/dirlist-php">dirlist-php <?php echo DL_VERSION ?></a>. |
| 201 Powered by PHP <?php echo phpversion(); ?>. | 195 Powered by PHP <?php echo phpversion(); ?>. |
| 202 </em> | 196 </em> |
| 203 </footer> | 197 </footer> |
| 204 | 198 |
| 205 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | 199 <script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.4/zepto.min.js"></script> |
| 200 | |
| 201 <script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/jquery.magnific-popup.min.js"></script> | |
| 206 | 202 |
| 207 <script> | 203 <script> |
| 208 $("table > tbody > tr > td > a").each(function() { | 204 $(document).ready(function() { |
| 209 if (!this.href.match(/\.(jpe?g|png|gif|webp)$/i)) return | 205 $("table > tbody > tr > td > a").each(function() { |
| 210 var title = this.outerHTML | 206 if (!this.href.match(/\.(jpe?g|png|gif|webp)$/i)) return |
| 211 this.setAttribute("data-title", title) | 207 this.className = "image" |
| 212 this.setAttribute("data-lightbox", "aa") | 208 this.setAttribute("title", this.innerHTML) |
| 209 }) | |
| 210 | |
| 211 $("table > tbody").magnificPopup({ | |
| 212 delegate: "a.image", | |
| 213 type: "image", | |
| 214 gallery: { enabled: true } | |
| 215 }) | |
| 213 }) | 216 }) |
| 214 </script> | 217 </script> |
| 215 | |
| 216 <script src="//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js"></script> | |
| 217 </body> | 218 </body> |
