jQuery
【jQuery】シンプルで超軽量なギャラリーMA5 Gallery
June 7, 2017

MA5 Galleryはシンプルで超軽量なjQueryギャラリー。
IMAGES option 1
<!-- html body --> <figure class="gallery-item"> <img src="./path/to/thumbnail/image-thumbnail.jpg" alt=""> </figure>
IMAGES option 2
<!-- html body --> <figure class="gallery-item"> <img src="./path/to/thumbnail/image.jpg" alt="" data-ma5pathtofull="./path/to/full/image.jpg"> </figure>
<!-- html head --> <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui, user-scalable=no"> <link href="./stylesheets/ma5gallery.css" rel="stylesheet" type="text/css"> <script src="./javascripts/jquery.js"></script> <script src="./javascripts/ma5gallery.js"></script>
SINGLE MODE
<!-- html body --> <figure class="gallery-item"><img src="name-thumbnail.jpg" alt=""></figure> <figure class="gallery-item"><img src="name-thumbnail.jpg" alt=""></figure>
GALLERY MODE
<!-- html body --> <div class="ma5-gallery"> <figure class="gallery-item"><img src="name-thumbnail.jpg" alt=""></figure> <figure class="gallery-item"><img src="name-thumbnail.jpg" alt=""></figure> </div>
figcaption
<!-- html body --> <figure class="gallery-item"> <img src="name-thumbnail.jpg" alt=""> <figcaption>Title</figcaption> </figure>
<!-- html body --> <figure class="gallery-item ma5-html"> <div class="ma5-html-content"> <div class="ma5-html-content-center"> <img class="ma5-html-thumbnail" src="https://img.youtube.com/vi/zCRUPWDIgYM/mqdefault.jpg" alt=""> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zCRUPWDIgYM?showinfo=0&rel=0" allowfullscreen></iframe> </div> </div> </div> <figcaption>Figcaption content <a href="#link">link</a></figcaption> </figure>
<figure class="gallery-item"> <img src="./path/to/thumbnail/image-thumbnail.jpg" data-ma5pathtofull="./path/to/full/image.jpg" alt=""> <figcaption>Title</figcaption> </figure>
$('gallery-item').ma5gallery({ preload:true, fullscreen:true });
MIT