MA5-gallery
Simple and ultralight jQuery gallery.
v.2.0.0 Add fullscren option and movie player features
1.6 Add option for customize path to full image
1.5 Add figcaption
1.4 Add previous next control at full image
1.3 Reorganize code for future development and usability
1.2 Add preload option
1.1 Add keyboard control
1.0 Initial
###Features:
- Responsive
- jQuery
- Html5
- CSS3
- fullscreen
- move player embed compatibile
Example
IMAGES option 1:
Thumbnails and full images should place in the same folder:
name-thumbnail.jpg
name.jpg
<!-- html body --> <figure class="gallery-item"> <img src="./path/to/thumbnail/image-thumbnail.jpg" alt=""> </figure>IMAGES option 2:
If you want use path to full image.
<!-- html body --> <figure class="gallery-item"> <img src="./path/to/thumbnail/image.jpg" alt="" data-ma5pathtofull="./path/to/full/image.jpg"> </figure>1.Getting Started
<!-- 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>2. Set up HTML
SINGLE MODE (for display only one image)
<!-- 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 for display gallery with keys controll (space, arrows left right keys, escape)
<!-- 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>EMBED MEDIA
<!-- 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>3.Call the script
Make custom class for gallery items. For example
<figure class="gallery-item"> <img src="./path/to/thumbnail/image-thumbnail.jpg" data-ma5pathtofull="./path/to/full/image.jpg" alt=""> <figcaption>Title</figcaption> </figure>and call the script:
$('gallery-item').ma5gallery({ preload:true, fullscreen:true });4.Options
preload : true|false (Default false) Download all images to the browser.
fullscreen : true|false (Default false) Turn on fullscreen mode.
License
The MIT License (MIT)
