Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

gguilherme

Galeria de imagens jquery

Por , em Javascript

Recommended Posts

gguilherme    0

gguilherme
Postado

Vi um tutorial no youtube de como fazer uma galeria de imagens com css e jquery mas na hora do codigo chamar o jquery n vai :/

N entendo mt mas acho que deve ter a ver com a versao da uma olhada aqui:

 

*******************************************HTML******************************************

portifolio.html

 

<!doctype html>
<html>
<head>
<title>Tutorial: Galeria de imagem.</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font: bold 12px Sans-serif;
margin:3em;
background-color:#3d3d3d;
}
#caixa-galeria{
background-color:#e9eaee;
height:265px;
width:810px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
-webkit-border-top-left-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-top-left-radius: 50px;
-moz-border-bottom-right-radius: 50px;
box-shadow:1px 1px 3px;
}
#galeria-botoes{
height:60px;
width:480px;
}
.botao {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e0dcdb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e0dcdb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e0dcdb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e0dcdb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e0dcdb 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e0dcdb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e0dcdb',GradientType=0 ); /* IE6-9 */
color:#717171;
height:35px;
margin:10px;
text-align:center;
width:135px;
float:left;
border-color:#cfcdcd #c0bebe #c0bebe #cfcdcd;
border-style:solid;
border-width:1px;
box-shadow:1px 1px 1px #c0bebe;
line-height:35px;
}
.botao:hover{
color:#484747;
border: 1px solid #989797;
box-shadow:1px 1px 1px #989797;
cursor:pointer;
}
#galeria{
width:745px;
}
ul,li{
list-style:none;
}
ul li{
margin:1em;
float: left;
}
.imagem{
background-color:#fafafc;
border:1px solid #a3a3a3;
padding:5px;
width:150px;
height:150px;
background-image:url(lupa.jpg);
background-position:center;
background-repeat:no-repeat;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="codigo-jquery.js"></script>
</head>
<body>
<center>
<div id="caixa-galeria">
<div id="galeria-botoes">
<div class="botao" id="botao1">Botao1</div>
<div class="botao" id="botao2">Botao2</div>
<div class="botao" id="botao3">Botao3</div>
</div>
<div id="galeria">
<div class="grupo-imagens" id="grupo1">
<ul>
<li>
<div class="imagem">
<img src="http://www.lorempixel.com/150/150" alt="imagem"/>
</div>
</li>
<li>
<div class="imagem">
<img src="http://www.lorempixel.com/150/150" alt="imagem"/>
</div>
</li>
<li>
<div class="imagem">
<img src="http://www.lorempixel.com/150/150" alt="imagem"/>
</div>
</li>
<li>
<div class="imagem">
<img src="http://www.lorempixel.com/150/150" alt="imagem"/>
</div>
</li>
</ul>
</div><!-- grupo-imagens -->
<div class="grupo-imagens js-esconder" id="grupo2">
<ul>
<li>
<div class="imagem">
<img src="http://www.lorempixel.com/150/150/sports" alt="imagem"/>
</div>
</li>
<li>
<div class="imagem">
<img src="http://www.lorempixel.com/150/150/sports" alt="imagem"/>
</div>
</li>
<li>
<div class="imagem">
<img src="http://www.lorempixel.com/150/150/sports" alt="imagem"/>
</div>
</li>
<li>
<div class="imagem">
<img src="http://www.lorempixel.com/150/150/sports" alt="imagem"/>
</div>
</li>
</ul>
</div>
<div class="grupo-imagens js-esconder" id="grupo3">
<ul>
<li>
<div class="imagem">
<img src="http://www.lorempixel.com/150/150" alt="imagem"/>
</div>
</li>
<li>
<div class="imagem">
<img src="http://www.lorempixel.com/150/150" alt="imagem"/>
</div>
</li>
<li>
<div class="imagem">
<img src="http://www.lorempixel.com/150/150" alt="imagem"/>
</div>
</li>
<li>
<div class="imagem">
<img src="http://www.lorempixel.com/150/150" alt="imagem"/>
</div>
</li>
</ul>
</div><!-- grupo-imagens -->
</div>
</div>
</body>
</html>
************************************************************************codigo-jquery.js**************
$(
function(){
$('.js-esconder').hide();
$('.imagem')
.mouseover( function(){
$(this).children().stop().fadeTo('fast', 0.6);
})
.mouseleave( function(){
$(this).children().stop().fadeTo('fast', 1);
});
);
}
);

Compartilhar este post

Link para o post
Compartilhar em outros sites

luqfreitas    0

luqfreitas
Postado

aconselho vc abrir esse código ( http://code.jquery.com/jquery-1.7.1.min.js ) copiar todo o código da página, salvar esse código como "jquery-1.7.1.min.js" e depois chamar ele na tua pagina.. chamar ele como um arquivo do teu site.. já tem uma versão mais atualizada do jquery cara..

espero ter ajudado, abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito