Publicado em 9 de mar.

Carregar carousel div

Eu criei um carrosel de imagens, na hora de testar com os script dentro da pagina basc.html ( pagina aonde encontra tabela com as imagens) deu certo, mostrava 4 imagens e trocava conforme apertava next e prev

Mas na hora q carrego a pagina basc.html dentro da div #corpo_conteudo q esta na pagina index.php o carrosel não funciona mais aparesse todas as imagens na tela

Index.php

<head>

 <title>Efeito Carrossel com Jquery</title>
 <!-- inclusão do javascript-->
 <script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="js/jcarousellite_1.0.1.min.js"></script>
 <script type="text/javascript" src="js/carrossel.js"></script>

 <!-- inclusão do CSS-->
 <link href="css/estilo.css" rel="stylesheet" type="text/css" />

</head>

<body>
<a href="#" onclick="abrirPag('12/teste.html');"><img src="imagens/esc.png" width="100" height="100" border="0" /></a>

<div id="corpo_conteudo">

</div>
</body>

basc.html

<body>
<script type="text/javascript">

$(function(){
 $("#carrossel").jCarouselLite({
 btnPrev : '.prev',
 btnNext : '.next',
 speed : 2000,
 visible : 4
 })
})

</script>
<div id="carrossel">
 <ul>
 <li><a href="basc/images/32.jpg" rel="lightbox[plants]" title="Cód. 32" ><img src="basc/thumbnails/32.jpg" alt="32" width="160" height="120" border="0" /></a></li>
 <li><a href="basc/images/35.jpg" rel="lightbox[plants]" title="Cód. 35"><img src="basc/thumbnails/35.jpg" alt="32" width="160" height="120" border="0"/></a></li>
 <li><a href="basc/images/32.jpg" rel="lightbox[plants]" title="Cód. 32" ><img src="basc/thumbnails/32.jpg" alt="32" width="160" height="120" border="0" /></a></li>
 <li><a href="basc/images/35.jpg" rel="lightbox[plants]" title="Cód. 35"><img src="basc/thumbnails/35.jpg" alt="32" width="160" height="120" border="0"/></a></li>
 <li><a href="basc/images/32.jpg" rel="lightbox[plants]" title="Cód. 32" ><img src="basc/thumbnails/32.jpg" alt="32" width="160" height="120" border="0" /></a></li>
 <li><a href="basc/images/35.jpg" rel="lightbox[plants]" title="Cód. 35"><img src="basc/thumbnails/35.jpg" alt="32" width="160" height="120" border="0"/></a></li>
 </ul>
 </div>

 <p>
 <a href="#" class="prev">Anterior</a>
 <a href="#" class="next">Próximo</a>
 </p>
</body>

carrosel.js

$(function(){
 $("#carrossel").jCarouselLite({
 btnPrev : '.prev',
 btnNext : '.next',
 speed : 2000,
 visible : 4
 })
})

estilo.css
[code]
*{

margin:0;
padding:0;
}

#carrossel{
 width:750px;
 height:250px;
 overflow:hidden;
 margin:0 auto;
}

#carrossel ul{

 list-style:none;
}

#carrossel ul li{

 float:left;
 display:inline;
}

 text-align:center;
}

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

William Bruno· 9 de mar.

scripts carregados por AJAX realmente não funcionam.

Já vi muitos tentando fazer isso, aqui algumas dicas que podem te ajudar, mas não garanto que vá resolver:

-> Não traga script na página que vai vir via AJAX (já deixe tudo na que está previamente carregada)

-> se precisar atrelar eventos dinamicamente, use o método: live()

veja:

http://forum.imasters.com.br/index.php?/topic/264642-executar-funcoes-js-em-paginas-carregadas-com-ajax/

EHCampos· 9 de mar.

>
scripts carregados por AJAX realmente não funcionam.

Já vi muitos tentando fazer isso, aqui algumas dicas que podem te ajudar, mas não garanto que vá resolver:

-> Não traga script na página que vai vir via AJAX (já deixe tudo na que está previamente carregada)

-> se precisar atrelar eventos dinamicamente, use o método: live()

veja:

http://forum.imasters.com.br/index.php?/topic/264642-executar-funcoes-js-em-paginas-carregadas-com-ajax/

Eu tenho uma galeria de imagem jcarousel funcinando 100% qd esta na sua pagina basc.html

Oq eu quero e carregar a pagina basc.html dentro de uma div na pagina index.

Mais q fasso isso os jcarousel para de funcionar.

Ja coloquei esses script na pagina inicial mais não funciona

EHCampos· 10 de mar.

Criei uma pajiga com lightbox e jcarouse abrin pelo link da pagina funciona tudo certo. Mas qd chamo essa pagina com um onclick para dentro de uma outra pagina para de funcionar

basc.html (lightbox + jcarouse

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body>

<div id="corpo_meio">
	<div id="corpo_conteudo">
<div id="carrossel">
 <ul>
 <li ><a href="basc/images/32.jpg" rel="lightbox-tour" title="Cód. 32" ><img src="basc/thumbnails/32.jpg" alt="32" onMouseOver="aumenta(this)" width="152" height="100" hspace="10" vspace="10" border="0" /></a></li>
 <li><a href="basc/images/35.jpg" rel="lightbox-tour" title="Cód. 35"><img src="basc/thumbnails/35.jpg" alt="32" onMouseOver="aumenta(this)" width="152" height="100" border="0"/></a></li>
 <li><a href="basc/images/32.jpg" rel="lightbox-tour" title="Cód. 32" ><img src="basc/thumbnails/32.jpg" alt="32" width="152" height="100" border="0" /></a></li>
 <li><a href="basc/images/35.jpg" rel="lightbox-tour" title="Cód. 35"><img src="basc/thumbnails/35.jpg" alt="32" width="152" height="100" border="0"/></a></li>
 <li><a href="basc/images/32.jpg" rel="lightbox-tour" title="Cód. 32" ><img src="basc/thumbnails/32.jpg" alt="32" width="152" height="100" border="0" /></a></li>
 <li><a href="basc/images/35.jpg" rel="lightbox-tour" title="Cód. 35"><img src="basc/thumbnails/35.jpg" alt="32" width="152" height="100" border="0"/></a></li>
 </ul>
 </div>
 </div>
 </div>

 <p>
 <a href="#" class="prev">Anterior</a>
 <a href="#" class="next">Próximo</a>
 </p>

</body>
</html>

Index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>serralheria Campos</title>

<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>
<script language="javascript" src="js/ajax.js"></script>
<script language="javascript" src="js/instrucao.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.min.js"></script>
<script type="text/javascript" src="js/carrossel.js"></script>
<script type="text/javascript" src="js/jquery.lightbox.min.js"></script>

<style type="text/css" media="all">

<!--

@import url("css/fundo.css");
@import url("css/botao.css");
@import url("css/topo.css");
@import url("css/estilo.css");

body {

	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #c8c8c8;
}

-->

</style>
</head>

<body>
<div id="fundo">
<div id="basc" style="margin-top:5px; margin-left:10%"><a href="#" onclick="abrirPag('basc.html');"><img src="imagens/basc.png" width="110" height="110" border="0" /></a></div>

<div id="corpo_meio">
	<div id="corpo_conteudo">
 </div>
</div>

</div>

</body>
</html>

William Bruno· 10 de mar.

Javascript carregado com AJAX não funciona.

-> deixe todos os script necessários na página já previamente carregada

-> procure não duplicar tags unicas como <html>,<body>,<head>..

-> atente ao nivel de pastas

e mesmo assim, pode ser que nada disso resolva.

dê uma olhada:

http://forum.imasters.com.br/index.php?/topic/165277-ajax-executando-scripts-dentro-de-uma-pagina-carregada-com-ajax/

http://forum.imasters.com.br/index.php?/topic/264642-executar-funcoes-js-em-paginas-carregadas-com-ajax/

Tópicos Unidos. Não duplique a mesma dúvida pelo fórum.

Regras iMasters

http://forum.imasters.com.br/index.php?app=core&module=help