Galeria de imagens

Publicado por em 03/05/2013 às 12h38

Neste tutorial vou ensinar como fazer alterações na galeria padrão SitePX  para ela ficar completamente diferente.

Preste bastante atenção em cada passo, pois entendendo o que foi feito fará com que você monte a sua galeria da maneira que desejar.

Para ilustrar segue o resultado final desta aula:


 

1. Alterando as dimensões da galeria

As imagens neste exemplo estão no formato paisagem, como todas que vamos utilizar vão ter o mesmo tamanho, a galeria vai ficar com uma melhor apresentação se acertarmos a altura da galeria para a mesma das imagens exibidas.
A galeria do SitePX tem 420px de altura, nossas imagens deste exemplo possuem 375px.
Também vamos colocar uma borda em volta da galeria e criar um efeito de canto arredondado (o efeito de canto só pode ser visto em navegadores modernos, não é compatível com Internet Explorer 8 ou anterior).
E para completar, vamos colocar uma cor preta de fundo padrão para o preenchimento da galeria.
Veja o código que deve ser criado:

#ws .page-content .content-inner .gallery-wrap .img-g{
  height:375px;
}
#ws .gallery-wrap{
  height:462px;
  border:5px solid #000;
  border-radius:5px;
  background-color:#000;
}

 

2. Alterando a cor de fundo da galeria

A cor de fundo aparece quando estamos trocando de imagens, e também quando a imagem é menor que a área da galeria.
Também será necessário alterar o atributo de altura deste elemento, para adequar com a altura que estamos trabalhando neste exemplo de galeria.

#ws .page-content .content-inner .gallery-wrap .img-g{ 
  height:375px; 
  background-color:#000;
}

Neste exemplo coloquei para ser preto em vez do cinza padrão do SitePX.

 

3. Alterando a área da legenda

Agora vamos colocar a caixa da legenda no alto, e com um tamanho variando conforme o texto, e alinhando para a esquerda.

#ws .gallery-wrap .img-g div.description{  
  bottom:auto;
  top:0;
  width: auto!important ;
  text-align:left;
}
#ws .gallery-wrap .img-g div.description p{
  margin:0!important;
}

O uso do "!important" serve para forçar esta propriedade em cima de um mesmo seletor já em uso na folha de estilo do site.

 

4. Alterando a lista das imagens pequenas

Agora vamos colocar uma cor de fundo na área das imagens pequenas e também dar um efeito de cantos arredondados para elas.

#ws .gallery-wrap .img-nav{ 
  background-color:#000; 
}
#ws .gallery-wrap .img-nav ul li a{
  border-radius:5px;

Vamos trocar agora as cores da imagem selecionada e da imagem com efeito de "mouse over"

#ws .gallery-wrap .img-nav ul li a.on{ 
  border:5px solid #FF7300;
  margin:0;
}
#ws .gallery-wrap .img-nav ul li a.over{  
  border:5px solid #CCC;
  margin:0;

 

5. Alterando os controles de próximo e anterior

Vamos utilizar outras imagens para estes controles, também vamos deixá-los com fundo preto para combinar

#ws .gallery-wrap a.prev{
  border-color:#000;
  background-color:#000;
}
#ws .gallery-wrap a.next{
  border-color:#000;
  background-color:#000;
}
#ws .gallery-wrap a.prev span{
  background-image:url(/img/152048/arrows-2390.png);
  background-position:0 0;
  width:23px;
  height:20px;
  left:0;
}
#ws .gallery-wrap a.next span{
  background-image:url(/img/152048/arrows-2390.png);
  background-position:-23px 0;
  width:23px;
  height:20px;
  left:2px;
}
#ws .gallery-wrap a.prev.over span{
  background-position:0 -20px;
}
#ws .gallery-wrap a.next.over span{
  background-position:-23px -20px;
}

Neste exemplo, todas as galerias do seu site vão ficar com a mesma cara. Caso deseje aplicar em apenas uma página em especial você terá que incluir uma classe de identificação da página junto com o seletor do site (#ws). Esta classe tem parte do nome igual ao endereço dela no navegador.
Por exemplo, se a sua página tem o endereço: www.meusite.com/minhapagina.html, o seletor fica assim #ws.pg-minhapagina. Já se sua página tem o endereço assim: www.meusite.com/loja/meuproduto.html, o seletor fica assim: #ws.it-meuproduto 

voltar para Tutoriais

left show tsN fwR fsN|left tsN b01e fwR bsd show|left fwR tsN show|bnull||image-wrap|news login c05|fsN fwR normalcase tsN|c05|login news fwR normalcase|tsN fwR normalcase|normalcase fwR c05|content-inner||