HTML5 Powered with Semantics

Blog Web Standards

galeriaScroll v3.0

Faça galerias de maneira rápida e fácil, utilizando a biblioteca jQuery

Baixar o galeriaScroll v3.0

Download do galeriaScroll v3.0

Demonstração
Exemplo de thumb
HTML5 Semantics
Exemplo de thumb
CSS3 Styling
Exemplo de thumb
HTML5 Semantics
Exemplo de thumb
CSS3 Styling
Exemplo de thumb
HTML5 Semantics
Exemplo de thumb
HTML5 Semantics
Exemplo de thumb
HTML5 Semantics
JavaScript

Executando o plugin e configurando suas opções

Para executar o plugin no elemento desejado, é só criar uma nova instância:

var galeria_principal = new $.galeriaScroll($('#elemento'));

As definições que já vem configuradas no plugin são:

'galeriaAnterior'  : 'anterior',        // classe para o link anterior
'galeriaProximo'   : 'proximo',         // classe para o link proximo
'itemGaleria'      : 'figure',          // elemento que contem cada item da galeria
'estruturaGaleria' : '.mascara > div',  // elemento que sera animado (com margin)
'velocidade'       : 250,               // velocidade da animacao em ms
'paginacao'        : false,             // true / false para exibir ou esconder a paginacao
'ampliacao'        : false              // true / false para exibir ou esconder a popup da imagem ampliada

Caso queira alterar algum padrão, é só criar a nova instância do plugin para o elemento desejado, alterando o valor da opção:

var galeria_principal = new $.galeriaScroll($('#elemento'), {
  paginacao: true,
  ampliacao: true
});

Controlando a galeria com links externos

Para executar o scroll da galeria por um link externo, basta executar o metodo no clique do mesmo:

$(document).ready(function(){

  // cria a instância da galeria
  var galeria_principal = new $.galeriaScroll($('#elemento'));
  
  // executando o método em um link qualquer, para fazer o scroll
  $('a').click(function(){
    
    galeria_principal.scrollGaleria('anterior'); // O link DEVE ter a mesma classe usada na navegacao da galeria (por padrao usa-se 'anterior' e 'proximo')
    
    return false;
    
  });
  
  // a paginacao pode ser controlada tambem
  $('a').click(function(){
    
    galeria_principal.scrollPaginacao('2'); // No caso da paginacao, define-se para qual pagina o link apontara
    return false;
    
  });

});

Voltar ao índice

HTML

Cabeçalho da página

<head>
...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="scripts/galeriaScroll-3.0-min.js"></script>
<script type="text/javascript" src="scripts/funcionalidades.js"></script>
...
</head>

Código da galeria

<div id="galeria_demonstracao">
  <div class="mascara">
    <div>
      <figure>
        <img src="imagens/class-header-semantics.jpg" alt="Exemplo de thumb" />
        <figcaption>
          <h5>HTML5 Semantics</h5>
        </figcaption>
      </figure>
    </div>
  </div>
</div>

Voltar ao índice

CSS

Implementação no CSS

/* ------- GALERIA ------- */
#galeria_demonstracao { padding: 10px; background: #f3f3f3; text-align: center; }
#galeria_demonstracao a.inativo { color: #999; }
#galeria_demonstracao .mascara { width: 438px; margin: 0 auto; padding: 10px 0; overflow: hidden; }
#galeria_demonstracao .mascara figure { float: left; width: 220px; text-align: center; }
#galeria_demonstracao ol li { display: inline; margin: 0 5px; }
#galeria_demonstracao ol li.ativo a { color: #ff0090; }

Voltar ao índice