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&amp;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

• Tag
• Gallery
• jQuery
• Responsive