Responsive JavaScript Image Gallery Plugin – Galleria

Galleria is a simple and various types of themes oriented image gallery and lightbox plugin. Without any knowledge programming language, you can create a beautiful image gallery with this plugin.

Features:

• It can be installed with NPM and Bower.
• Very easy to implement and configure.
• No programming or coding skills are required.
• iPhone, iPad & touch support
• Supports Flickr, Vimeo, YouTube and more.

Install with NPM

$ npm install galleria

Install with Bower

$ bower install galleria

How to use it:

1. Include the Javascript galleria.min.js at the bottom of the web page.

<script src="path/to/js/galleria.min.js"></script>

2. Add the basic HTML to the page.

<div id="galleria-azur" class="galleria">
   <img src="path/to/demo-1.jpg" alt=""/>
   <img src="path/to/demo-2.jpg" alt=""/>
   <img src="path/to/demo-3.jpg" alt=""/>
   <img src="path/to/demo-4.jpg" alt=""/>
</div>

3. Initialize the plugin and we’re ready to go.

(function() {
    Galleria.loadTheme('js/themes/azur/galleria.azur.min.js');
    Galleria.run('#galleria-azur', {
      transition: 'fadeslide'
    });
}());

*** Don’t forget to add Galleria.loadTheme, without theme the plugin will not work. You can find this in galleria-master\dist\themes. There are total 6 predefined themes within separate folder(azur, classic, folio, fullscreen, miniml and twelve).

*** Also you will need to mention fixed height for the gallery, it will not work without height, you can add height through CSS or height option in the plugin.

.galleria{ height: 500px; }

(function() {
    Galleria.loadTheme('js/themes/azur/galleria.azur.min.js');
    Galleria.run('#galleria-azur', {
      transition: 'fadeslide',
      height: 500
    });
}());

Plugin’s default options: