André Buzzo

CRIAÇÃO DE SITES | DESENVOLVIMENTO DE SISTEMAS | CONSULTORIA EM SEO | ORIENTAÇÃO EM TCC

Script – Galeria de Imagens com Listas

Publicado na categoria Banco de Scripts com 5.572 visualizações e 4 comentários

Galeria de Imagens com Listas - André Buzzo Webdesign

Fala Pessoas!

Conforme eu havia prometido, segue o script da Vídeo Aula!!

Abraços!

index.php


<meta charset="utf-8"/>

<link href="style.css" rel="stylesheet" />
<div id="recebeImagens">
<ul>
<li><img title="Imagem" alt="Imagem" src="images/imagem.png" width="50px" />
<span>Imagem 00</span></li>
<li><img title="Imagem" alt="Imagem" src="images/imagem1.png" width="50px" />
<span>Imagem 01</span></li>
<li><img title="Imagem" alt="Imagem" src="images/imagem2.png" width="50px" />
<span>Imagem 02</span></li>
<li><img title="Imagem" alt="Imagem" src="images/imagem4.png" width="50px" />
<span>Imagem 04</span></li>
<li><img title="Imagem" alt="Imagem" src="images/imagem5.png" width="50px" />
<span>Imagem 05</span></li>
<li><img title="Imagem" alt="Imagem" src="images/imagem6.png" width="50px" />
<span>Imagem 06</span></li>
<li><img title="Imagem" alt="Imagem" src="images/imagem7.png" width="50px" />
<span>Imagem 07</span></li>
<li><img title="Imagem" alt="Imagem" src="images/imagem8.png" width="50px" />
<span>Imagem 08</span></li>
<li><img title="Imagem" alt="Imagem" src="images/imagem.png" width="50px" />
<span>Imagem 00</span></li>
<li><img title="Imagem" alt="Imagem" src="images/imagem1.png" width="50px" />
<span>Imagem 01</span></li>
<li><img title="Imagem" alt="Imagem" src="images/imagem2.png" width="50px" />
<span>Imagem 02</span></li>
<li><img title="Imagem" alt="Imagem" src="images/imagem4.png" width="50px" />
<span>Imagem 04</span></li>
<li><img title="Imagem" alt="Imagem" src="images/imagem5.png" width="50px" />
<span>Imagem 05</span></li>
<li><img title="Imagem" alt="Imagem" src="images/imagem6.png" width="50px" />
<span>Imagem 06</span></li>
<li><img title="Imagem" alt="Imagem" src="images/imagem7.png" width="50px" />
<span>Imagem 07</span></li>
<li><img title="Imagem" alt="Imagem" src="images/imagem8.png" width="50px" />
<span>Imagem 08</span></li>
</ul>
<div class="clear"></div>
</div>

style.css

* body  {
margin:0;
padding:0;
font-family:'Trebuchet Ms', Arial, Helvetica, sans-serif;
font-size:medium;
line-height:150%;
color:#000;
}
#recebeImagens {
width:684px;
height:auto;
background-color:#ccc;
border:1px solid #666;
border-radius:5px;
moz-border-radius:5px;
box-shadow:0 0 5px 0 #000;
moz-box-shadow:0 0 5px 0 #000;
webkit-box-shadow:0 0 5px 0 #000;
margin:15px auto;
}

#recebeImagens ul {
list-style:none;
margin:10px -5px;
}

#recebeImagens ul li {
float:left;
margin:0 25px 10px;
}

#recebeImagens ul li img {
display:block;
text-align:center;
margin:0 5px;
height:auto;
}

#recebeImagens ul li span {
color:#900;
font-size:80%;
font-weight:bold;
}

.clear {
clear:both;
}
	
  • karine

    Como faço p/ clicar na imagem e ficar no tamanho original?

  • Joao carlos

    showww

Saiba mais sobre

André Buzzo

Sou desenvolvedor web especializado na criação de sites gerenciáveis com Wordpress; colunista da Abraweb - Associação Brasileira de Webdesigners - e tutor na instituição MX Cursos.

Template? Eu programo o seu!

Então você comprou um template, e pensou que ia ser fácil colocar seu site no ar né?

Pode ser fácil sim! Deixa comigo que eu faço ele ficar funcional para ti!

pesquise por conteúdos

Meus cursos

eu recomendo!

instagram