HM Gallery – jQuery Gallery Plugin

Demo

Below you can see HM Gallery in action: 20 images loaded with thumbnails, slide transition, fullscreen mode, and an image counter. Click the thumbs, use the arrows, or enable fullscreen to test the full experience.

Tip: click the fullscreen button, navigate the thumbs, and try the transitions.

Key features

Smooth slide and fade transitions
Thumbnail navigation with side arrows
Fullscreen mode for the gallery only
Autoplay with play/pause button
Image counter (1 / N)
Captions via data-caption attribute
Responsive and touch-friendly layout
Lightweight jQuery plugin, easy to integrate

Install via CDN

The easiest way to get started is using the hosted version on jsDelivr. Just include the gallery CSS, jQuery, and the HM Gallery JavaScript:

                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hiltonmuccillo/hm-gallery@v1.0.3/dist/hmGallery.css">

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiltonmuccillo/hm-gallery@v1.0.3/dist/jquery.hmGallery.js"></script>
                

If you prefer, you can also use the minified versions for production:

                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hiltonmuccillo/hm-gallery@v1.0.3/dist/hmGallery.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiltonmuccillo/hm-gallery@v1.0.3/dist/jquery.hmGallery.min.js"></script>
                

How to use

HTML

Create a container with the hm-gallery class and an id, containing the images that will be part of the gallery:

                    <div class="hm-gallery" id="galleryDemo">
    <img src="images/photo1.jpg" alt="Photo 1" data-caption="Caption 1">
    <img src="images/photo2.jpg" alt="Photo 2" data-caption="Caption 2">
    <img src="images/photo3.jpg" alt="Photo 3" data-caption="Caption 3">
</div>
                

JavaScript

Then initialize the plugin with jQuery and, if you want, pass your desired options:

                    $(function () {
    $('#galleryDemo').hmGallery({
        loop: true,
        enableFullscreen: true,
        autoplay: false,
        autoplayInterval: 4000,
        transition: 'slide',      // 'slide', 'fade' or 'none'
        animationDuration: 400    // in milliseconds
    });
});
                

Available options

These are the main options you can configure when initializing HM Gallery:

                    $('#galleryDemo').hmGallery({
    startIndex: 0,
    loop: true,
    enableFullscreen: true,
    autoplay: false,
    autoplayInterval: 4000,
    transition: 'fade',      // 'slide', 'fade' or 'none'
    animationDuration: 400
});
                

Option	Type	Default	Description
startIndex	Number	0	Initial index of the displayed image.
loop	Boolean	true	Whether the gallery wraps to the beginning/end when navigating.
enableFullscreen	Boolean	true	Enables or disables fullscreen mode.
autoplay	Boolean	false	Starts the gallery in autoplay mode.
autoplayInterval	Number	4000	Time between slides in autoplay, in milliseconds.
transition	String	'fade'	Transition type: `'slide'`, `'fade'` or `'none'`.
animationDuration	Number	400	Transition animation duration, in milliseconds.

Captions

Captions are defined by the data-caption attribute on each image:

<img src="img.jpg" alt="Image description" data-caption="My custom caption">

Suggested folder structure

A simple structure to organize the project:

                    hm-gallery/
│
├── dist/                # Ready-to-use CSS & JS (CDN / production)
│   ├── hmGallery.css
│   ├── hmGallery.min.css
│   ├── jquery.hmGallery.js
│   └── jquery.hmGallery.min.js
│
├── src/                 # Source files
│   ├── css/
│   └── js/
│
├── images/              # Images used in the demo
│
├── demo/                # Demo page
│   └── index.html
│
├── README.md
└── LICENSE
                