Ir para conteúdo

POWERED BY:

Arquivado

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

25051994

Galeria de Fotos não roda em localhost pelo browser

Por , em Desenvolvimento frontend

Recommended Posts

25051994    0

25051994
Postado

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;
}
#header
{
background-image: url("imagens/praia.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 150px;
} 
#cabecario
{
height: 100px;
width: 100%;
height: 50px;
margin: 0px auto;
}  
 
.centroC
{
margin: 0px auto;
}
a 
{ 
text-decoration: none; 
}  
a:hover 
{
text-decoration: underline; 
}  
#slideshow {  
width: 640px;  
height: 270px;  
position: relative;  
}  
#slide_fotos p {  
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;  
}  
#pager a {  
color: #000;  
width: 17px;  
height: 17px;  
line-height: 15px;  
text-align: center;  
display: inline-block;  
font-size: 10px;  
margin: 2px;  
color: #fff;  
}  
#pager a.activeSlide {  
color: #000;  
background: url('../images/over_white.png');  
}

 

-----------------------------------------------------------------------------------------------------------------------------------------

 

Arquivo index.html

 

 

<!DOCTYPE html>
<html>
<head>
<title>
João Pedro Schmitt
</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  [/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  [/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>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

25051994    0

25051994
Postado

Não eu ainda não tenho domínio é um servidorzinho local só para testar a aplicação mais facilmente. Que nem quando você instala o Tomcat e cola os arquivos dentro da pasta webapp se não me engano para acessar pelo seu browse.

Tentei acessar o site de outro pc usando o ip atual da minha máquina que está na mesma rede e também não executou a troca das imagens.

Compartilhar este post

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

Informação importante

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

  Aceito