You'll need to import 2 files:
bootstrap.modallery.min.js
bootstrap.modallery.min.css
(Optional. Just import if you want to use navigation or customize)Modallery also requires bootstrap.min.js and jquery.min.js to work.
It's simple. Just import the files, call the plugin $(document).modallery();
and add the class .modallery
on every image you want to show with a data attribute data-to
refering which image should open.
Example:
<div class="col-md-3"> <img src="img/sm-1.jpg" data-to="img/lg-1.jpg" class="modallery"> </div> <div class="col-md-3"> <img src="img/sm-2.jpg" data-to="img/lg-2.jpg" class="modallery"> </div> <div class="col-md-3"> <img src="img/sm-3.jpg" data-to="img/lg-3.jpg" class="modallery"> </div> <div class="col-md-3"> <img src="img/sm-4.jpg" data-to="img/lg-4.jpg" class="modallery"> </div>
- Data attributes
data-caption
Just add this in the <img>
tag and a caption will appear below the image.
- JavaScript attributes
Set the options below inside .modallery()
call.
size
Default: empty. Sets the Bootstrap available sizes for modals: sm or lg
caller
Default: 'modallery'
Changes the class who Modallery should find.
title
Default: 'Image Gallery'
Changes the modal gallery title.
navigate
Default: false
Displays a modal footer with links to the others images on gallery.