Last active
April 9, 2019 06:17
-
-
Save yutaide/1f421da4f089aef0aa017dea33f1806b to your computer and use it in GitHub Desktop.
magnifierで画像拡大
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <link rel="stylesheet" href="../Magnifier.js-master/magnifier.css"><!--Magnifier--> | |
| <title></title> | |
| </head> | |
| <style> | |
| #fb1{ | |
| display: flex; | |
| flex-flow: row wrap; | |
| justify-content: center; | |
| } | |
| #preview{ | |
| width: 384px; | |
| height: 256px; | |
| } | |
| </style> | |
| <body> | |
| <div id="fb1"> | |
| <div class="magnifier-thumb-wrapper"> | |
| <img class="img" src="../images/img1-sm.jpg" data-large-img-url="../images/img1.jpg"> | |
| </div> | |
| <div class="magnifier-preview" id="preview"></div> | |
| </div> | |
| <script src="../Magnifier.js-master/Magnifier.js"></script><!--Magnifier--> | |
| <script src="../Magnifier.js-master/demo/Event.js"></script><!--Javascript library Event.js--> | |
| <script> | |
| var evt = new Event(), m = new Magnifier(evt); | |
| m.attach({ | |
| thumb: '.img', | |
| largeWrapper: 'preview', | |
| zoomable: true | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment