Mercurial > dirlist-php
changeset 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 | 73833d29dbad |
| children | dc464717e028 |
| files | index.php |
| diffstat | 1 files changed, 17 insertions(+), 16 deletions(-) [+] |
line wrap: on
line diff
--- 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>