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>