Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde galera.
Iniciei o desenvolvimento de um site e estou tentando adicionar à página principal uma galeria de fotos no estilo de um carrossel que fica trocando de fotos automaticamente, desenvolvi o site até o momento utilizando somente o bloco de notas, criei um arquivo .html que é a página principal usando twitter bootstrap, um arquivo css com formatações e um pequeno arquivo .js para executar a troca de imagens, estou usando o servidor Vertrigo que é Apache com MySQL, quando coloco a página na pasta "www" dentro do local de instação do vertrigo para acessa-la localhost pelo browse a página carrega mas não executa a troca das imagens do carrossel, porém quando abro a página local com 2 cliques ela abre no browser e executa a transição das imagens. Se puderem me ajudar segue os códigos abaixo.
-----------------------------------------------------------------------------------------------------------------------------------------
Arquivo: carousel.js
$(document).ready(function(){
$('#slide_fotos').cycle({
fx: 'fade',
pager: '#pager'
});
});
-----------------------------------------------------------------------------------------------------------------------------------------Arquivo: index.css
body
{
text-decoration: none;
width: 1024px;
margin: 0px auto;
padding: 0;
font-family: verdana, arial, sans-serif;
text-align: center;
background:#ccc;
}
#headerbackground-image: url("imagens/praia.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 150px;
}
#cabecarioheight: 100px;
width: 100%;
height: 50px;
margin: 0px auto;
}
.centroCmargin: 0px auto;
}text-decoration: none;
}text-decoration: underline;
}
#slideshow {
width: 640px;
height: 270px;
position: relative;
}position: absolute;
right: 0;
top: 210px;
z-index: 3;
padding: 10px 20px;
background: url('../images/over_white.png');
}
#slide_fotos {
height: 100%;
overflow: hidden;
}
#pager {
position: absolute;
z-index: 10;
top: 20px;
right: 20px;
}color: #000;
width: 17px;
height: 17px;
line-height: 15px;
text-align: center;
display: inline-block;
font-size: 10px;
margin: 2px;
color: #fff;
}color: #000;
background: url('../images/over_white.png');
}-----------------------------------------------------------------------------------------------------------------------------------------
Arquivo index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="[url=[http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js](http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js)][http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js](http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js) [/url]"></script>
<script type="text/javascript" src="[url=[http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js](http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js)][http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js](http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js) [/url]"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<link href="index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="caroucel.js"></script>
</head>
<body>
<div id="header" >
</div>
<div class="container-fluid" align="center">
<div class="row">
<div class="span12" >
<div class="navbar">
<div class="navbar-inner" id="cabecario">
<a class="brand" href="#">Schmitt</a>
<ul class="nav">
<li><a href="#">Principal</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Conheca</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Missao</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Produtos</a></li>
<li class="divider-vertical"></li>
<li><a href="login.html">Login</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Fale Conosco</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" align="center">
<div class="row">
<div class="span12">
<div class="row">
<div class="span3" id="centroC">
<ul class="thumbnails" align="justify"><p>João Pedro Schmitt, estudante universidade Católica de Jaraguá do Sul (PUC-SC) do curso: Bacharelado em Sistemas de Informação, conhecedor das linguagens de desenvolvimento Java, HTML, CSS, PHP, SQL, Java para WEB, Java Android, C.Trabalha com Sistemas e WEB Sites.</p>
<li class="span3 pull-center">
<a href="#" class="thumbnail" >
<img src="imagens/praia.jpg" alt="">
</a>
</li>
</ul>
</div>
<div class="span9" id="slideshow">
<ul id="slide_fotos">
<li><img src="imagens/teste.jpg" alt="" title="Foto 01" />
<p>Primeira Imagem, céu azul!</p></li>
<li><img src="imagens/teste.jpg" alt="" title="Foto 02" />
<p>Segunda Imagem, queda d'agua</p></li>
<li><img src="imagens/teste.jpg" alt="" title="Foto 03" />
<p>Terceira Imagem, universo, negro</p></li>
<li><img src="imagens/teste.jpg" alt="" title="Foto 04" />
<p>Quarta Imagem, praia calmaria</p></li>
<li><img src="imagens/praia.jpg" alt="" title="Foto 05" />
<p>Quinta Imagem, montanhas, lago</p></li>
<li><img src="imagens/praia2.jpg" alt="" title="Foto 06" />
<p>Sexta Imagem, mais verde natureza</p></li>
</ul><!-- /fotos -->
<p id="pager">
</p><!-- /pager -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>Carregando comentários...