HM Gallery – Plugin de Galeria jQuery

Demonstração

Abaixo você vê a HM Gallery em ação, carregando 20 imagens com thumbnails, transição em slide, modo fullscreen e contador de imagens. Clique nos thumbs, use as setas ou ative o fullscreen para testar a experiência completa.

Dica: clique no botão de fullscreen, navegue pelos thumbs e experimente as transições.

Principais recursos

Transições suaves em slide e fade
Navegação por thumbnails com setas laterais
Modo fullscreen apenas da galeria
Autoplay com botão play/pause
Contador de imagens (1 / N)
Captions via atributo data-caption
Layout responsivo e touch-friendly
Plugin jQuery leve e fácil de integrar

Instalação via CDN

A forma mais simples de começar é usando a versão hospedada no jsDelivr. Basta incluir o CSS da galeria, o jQuery e o JavaScript da HM Gallery:

<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>
            

Se preferir, você também pode usar as versões minificadas para produção:

<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>
            

Como usar

HTML

Crie um contêiner com a classe hm-gallery e um id, contendo as imagens que farão parte da galeria:

<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

Em seguida, inicialize o plugin com jQuery e, se quiser, passe as opções desejadas:

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

Opções disponíveis

Estas são as principais opções que você pode configurar ao inicializar a HM Gallery:

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

Opção	Tipo	Default	Descrição
startIndex	Number	0	Índice inicial da imagem exibida.
loop	Boolean	true	Define se a galeria volta ao início/fim ao navegar.
enableFullscreen	Boolean	true	Ativa ou desativa o modo fullscreen.
autoplay	Boolean	false	Inicia a galeria em modo autoplay.
autoplayInterval	Number	4000	Intervalo entre slides no autoplay, em milissegundos.
transition	String	'fade'	Define o tipo de transição: `'slide'`, `'fade'` ou `'none'`.
animationDuration	Number	400	Duração da animação de transição, em milissegundos.

Captions

As legendas são definidas pelo atributo data-caption em cada imagem:

<img src="img.jpg" alt="Descrição da imagem" data-caption="Minha legenda personalizada">
            

Estrutura de pastas sugerida

Uma estrutura simples para organizar o projeto:

hm-gallery/
│
├── dist/                # CSS & JS prontos para uso (CDN / produção)
│   ├── hmGallery.css
│   ├── hmGallery.min.css
│   ├── jquery.hmGallery.js
│   └── jquery.hmGallery.min.js
│
├── src/                 # Arquivos-fonte
│   ├── css/
│   └── js/
│
├── images/              # Imagens usadas no demo
│
├── demo/                # Página de demonstração
│   └── index.html
│
├── README.md
└── LICENSE
            