Skip to content
Magically create images galleries in boostrap modals
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
img
src
README.md
gallery.html

README.md

bootstrap-modallery

Magically create images galleries in boostrap modals

Demo Screenshot

Installation

You'll need to import 2 files:

  • JS: bootstrap.modallery.min.js
  • CSS: 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.

Usage

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.

CDN: JsDelivr: http://www.jsdelivr.com/projects/bootstrap-modallery

https://rawgit.com/lhcgoncalves/bootstrap-modallery/master/src/js/bootstrap.modallery.min.js https://rawgit.com/lhcgoncalves/bootstrap-modallery/master/src/css/bootstrap.modallery.min.css

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>

Options

- Data attributes

data-to (required)

Defines which target image should be displayed in the modal.

data-caption (optional)

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.

arrows

Default: false

Displays two buttons for navigation between images on modal.

keypress

Default: false

Allows to navigate between images using arrows keys.

You can’t perform that action at this time.