Jquery Plugin: Simple Gallery - Galeria simples

Existem casos em que é difícil utilizar algumas daquelas maravilhosas galerias em Jquery, muitas vezes criadas por designers cheios de inspiração, que exalam interatividade e qualidade. Pode ocorrer também, de um cliente de um website do qual você é responsável, simplesmente não gostar destes tipos de galerias ou quem leiautou o site simplesmente criou a idéia de uma galeria "maluca" do qual o cliente adorou e não quer trocar por nada. Para estes casos eu desenvolvi um plugin de fácil adaptação que poderá lhe ajudar e salvar um tempo precioso de desenvolvimento.

Download e exemplos

Abaixo você pode baixar o plugin, juntamente com um exemplo de uso:

Download 1: Jquery Simple Gallery Plugin 1.0
Download 2: Exemplo de uso

Agora ficou fácil

O Jquery Simple Gallery é um plugin que permite uma fácil adaptação para diferentes tipos de leaiautes de galerias, não dependendo de complexas estilizações, basta apenas dizer onde você quer que a ampliação apareça, definir os elementos da página que vão servir de botões de navegação e ainda opcionalmente, pode definir a visualização de miniaturas, para melhorar um pouco a interação do usuário com a galeria.

Chamando o plugin

$('#gallery').simpleGallery({
    'data' : 'pictures.php',
    'imagePrev' : '#prevButton',
    'imageNext' : '#nextButton'
});

Bastam três parâmetros para criar a galeria: data, imagePrev, imageNext

Marcação HTML

A única marcação que você precisará declarar em seu documento, serão os elementos que você utilizou como parâmetro:

<div id="imagePrev"></div>
<div id="gallery"></div>
<div id="imageNext"></div>

Só faltam as imagens

Agora a única peça que falta é conseguir uma lista com as imagens que você quer que apareçam em sua galeria, isto é feito por meio de um arquivo com um objeto JSON no seguinte formato:

{
    "images": [
        "caminho/da/imagem/01.jpg",
        "caminho/da/imagem/02.jpg"
  ...
    ],
    "thumbs": [
        "caminho/da/miniatura/01.jpg",
        "caminho/da/miniatura/02.jpg",
  ...
    ]
}

No arquivo disponível para download, você terá uma solução pronta criada em php para conseguir criar este objeto com facilidade.

Extendendo as possibilidades

Abaixo segue a lista de parâmetros disponíveis para este plugin.

• String data:
  • Função: o arquivo responsável por criar o objeto JSON com a lista de imagens e thumbs da galeria;
  • Default: vazio
• String/Bool counter:
  • Função: define um elemento para mostrar um contador de imagens. Ex: 5 / 10
  • Default: false (não será mostrado)
• String imagePath:
  • Função: caminho onde encontram-se as imagens. O valor deste parâmetro será passado para o arquivo definido no parâmetro data via método GET.
  • Default: images/
• String imagePrev:
  • Função: Elemento utilizado para retornar a uma imagem anterior.
  • Default: vazio
• String imageNext:
  • Função: Elemento utilizado para avançar para uma próxima imagem.
  • Default: vazio
• String/Bool filmstrip:
  • Função: Defina o elemento da página onde deseja mostrar as miniaturas, deixe em branco para não mostrar.
  • Default: false (não será mostrado)
• Integer frames:
  • Função: Define quantas miniaturas serão mostradas no elemento definido em filmstrip
  • Default: 6
• String thumbPath:
  • Função: caminho onde encontram-se as miniaturas. O valor deste parâmetro será passado para o arquivo definido no parâmetro data via método GET.
  • Default: thumbs/
• String thumbPrev:
  • Função: Elemento utilizado para retroceder nas miniaturas. Caso não seja definido, este elemento será criado automáticamente.
  • Default: #simple-gallery-filmstrip-prev



• String thumbNext:
  • Função: Elemento utilizado para avançar nas miniaturas. Caso não seja definido, este elemento será criado automáticamente.
  • Default: #simple-gallery-filmstrip-next



• String loadMessage:
  • Função: Defina uma mensagem ou gif padrão para ser mostrada enquanto uma imagem estiver sendo carregada.
  • Default: Carregando ...

Licença de uso

O plugin esta sobre a licença MIT de uso.

Finalizando

Mais um plugin para facilitar nossas vidas, existem ajustes a serem feitos para melhorar um pouco a interface do usuário, mas tenho certeza que da maneira que esta hoje, ele já pode ser utilizado em muitas situações e salvar um tempo precioso.