Criar uma galeria de fotos em Jquery – Tutorial

Por | Atualizado em 2015-02-16

Neste tutorial iremos explicar como criar uma galeria de fotos em Jquery. Para isso, iremos usar o plugin gratuito Divas Slider. A galeria de fotos possui um design responsivo, o que significa que irá adaptar automaticamente o tamanho da galeria à tela do dispositivo onde for exibida.

Se ficou curioso, não se esqueça de visualizar a nossa demonstração online do Divas Slider.

Criar uma galeria de fotos em Jquery - divas slider

Como usar o Divas Slider – galeria de fotos em Jquery


1. Comece por aceder ao site do Divas Slider e proceda ao download de toda a livraria clicando no botão “Download JQuery”.

Extraia os arquivos do Divas Slider e faça o upload dos mesmos para o seu servidor. Se necessário, poderá hospedar os seus arquivos através do Google Drive. Caso tenha dúvidas, consulte os seguintes tutoriais:

Agora, será necessário “chamar” as livrarias no cabeçalho da página (secção head), adicionando o seguinte código:

<link rel="stylesheet" type="text/css" media="screen" href="diretório/divas_free_skin.css" />
<script type="text/javascript" src="diretório/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="diretório/jquery.divas-1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#slider").divas({
slideTransitionClass: "divas-slide-transition-left",
titleTransitionClass: "divas-title-transition-left",
titleTransitionParameter: "left",
titleTransitionStartValue: "-999px",
titleTransitionStopValue: "0px",
wingsOverlayColor: "rgba(0,0,0,0.6)"
});
});
</script>

2. O segundo passo, consiste em adicionar a linguagem de estilos (CSS) do plugin. Esse código será adionado na secção Style, ou usando um arquivo de CSS externo:

.divas-slider {
position: relative;
margin: 0 auto;
padding: 0;
width: 100%;
height: auto;
overflow: hidden;
}
.divas-slide-container {
position: relative;
margin: 0;
padding: 0;
}
.divas-slide-container:before,
.divas-slider-container:after {
content: "";
display: table;
clear: both;
}
.divas-slide {
position: relative;
margin: 0;
padding: 0;
float: left;
overflow: hidden;
}
.divas-slide img {
display: block;
margin: 0;
padding: 0;
width: 100%;
height: auto;
outline: 0 none;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}

3. Agora, será necessário adicionar o código HTML necessário para “construir” a galeria de fotos. Para isso, adicione o seguinte código no local onde pretende que a galeria seja exibida:

<div id="YourSliderContainer" class="divas-slider">
<ul class="divas-slide-container">
<li class="divas-slide"><img src="placeholder.gif" alt="" data-src="link_imagem" data-title="<h1>Titulo</h1><p>Descrição.</p>"/></li>
<li class="divas-slide"><img src="placeholder.gif" alt="" data-src="link_imagem" data-title="<h1>Titulo</h1><p>Descrição.</p>" /></li>
<li class="divas-slide"><img src="placeholder.gif" alt="" data-src="link_imagem" data-title="<h1>Titulo</h1><p>Descrição.</p>"/></li>
</ul> <!-- navigation and controls --> <div class="divas-navigation"> <span class="divas-prev">Anterior</span> <span class="divas-next">Próximo</span> </div> <div class="divas-controls"> <span class="divas-start">Começar</span> <span class="divas-stop">Parar</span> </div>

Não se esqueça de adicionar o link das suas imagens no campo “data-src”, bem como a imagem “placeholder.gif” que está incluída no arquivo de download do Divas Slider no campo “img src”.

Altere ainda o Titulo e a descrição de cada slide. O exemplo está preparado para exibir 3 imagens, mas você poderá adiconar mais, repetindo os trechos “<li class=”divas-slide…..até….Descrição.</p>”/></li>”

4. Por fim, basta chamar o Divas Slider na sua página usando o seguinte código:

<script type="text/javascript">
$(document).ready(function() {
$("#YourSliderContainer").divas();
});
</script>

Caso tenha dúvidas, não se esqueça de enviar o seu comentário.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *