Script - Galeria de Imagens com Listas | André Buzzo
contato@andrebuzzo.com.br | (11) 9-8551-3500 | facebook | skype:andrebuzzowebdesign

Script – Galeria de Imagens com Listas

Publicado na categoria Banco de Scripts com 5.917 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;
}
	

Voltar à página anterior!

  • karine

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

  • Joao carlos

    showww