Ir para conteúdo

Arquivado

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

Carcleo

Dificuldade com JCarroussel

Por , em Javascript

Recommended Posts

Carcleo    4

Carcleo
Postado
Pessoal, bom Dia!


Tenho uma pagina chamada por include do php em outra página.




Nessa página só tem um JCarrousel que retirei de uma outra:




<table>

<tr>

 <td align="center" valign="top" colspan="2">

 <div id="container">

  <div><a href="#" class="prev"><img src="img/anterior.png" /></a></div>

  <div id="carrossel" style="float:left">

   <ul> 

     <li><img src="<?php echo endereco_portais; ?>/foto.jpg" width="200px" /></li>

     <li><img src="<?php echo endereco_portais; ?>/foto.jpg" width="200px" /></li>

     <li><img src="<?php echo endereco_portais; ?>/foto.jpg" width="200px" /></li>

     <li><img src="<?php echo endereco_portais; ?>/foto.jpg" width="200px" /></li>

     <li><img src="<?php echo endereco_portais; ?>/foto.jpg" width="200px" /></li>

     <li><img src="<?php echo endereco_portais; ?>/foto.jpg" width="200px" /></li>

     <li><img src="<?php echo endereco_portais; ?>/foto.jpg" width="200px" /></li>

     <li><img src="<?php echo endereco_portais; ?>/foto.jpg" width="200px" /></li>

     <li><img src="<?php echo endereco_portais; ?>/foto.jpg" width="200px" /></li>

     <li><img src="<?php echo endereco_portais; ?>/foto.jpg" width="200px" /></li>

   </ul>

  </div>

  <div><a href="#" class="next"><img src="img/proximo.png" /></a></div>

 </div>

</td>

</tr>

</table>


Na página principal fiz as chamadas costumeiras:




<link rel="stylesheet" type="text/css" href="global/css/carousell.css" /></link>

  <link type="text/css" href="global/funcoes_js/dtp/css/jquery.css" rel="stylesheet" />  

  <script type="text/javascript" src="global/funcoes_js/jquery.js"></script>

  <script type="text/javascript" src="global/funcoes_js/jcarousell.js"></script>  

<script type="text/javascript">

  $(window).load(function () {

$("#carrossel").jCarouselLite({

btnPrev : '.prev',

btnNext : '.next',

auto    : 0,

speed   : 500,

visible : 10

})

})

</script>


E o CSS




#container{

   width: 1000px;

}


#carrossel{

   position:relative;

   width:1000px;

   height:100px;

   top: 0px;

   overflow:hidden;

   margin:0 auto;

}


#carrossel ul{

   list-style:none;

   float:left;

}

#carrossel ul li{

   float:left;

   display:inline;

   margin-left:4px;

}


.prev{

   position:relative;

   float: left;

   top:0px;

}


.next{

   position:relative;

   right:-470px;

   top:0px;

}


Erros que estão a acontecer:


A ) Quando clico nos botões Next e Prev, em vez de rodar as imagens ele tipo que submete um formulário.

B ) Os botões Next e Prev ficam em una altura mas as imagens ficam abaixo.


Como corrigir?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

B) Estude css básico, e retire essa table dai.

 

A) Aperte Ctrl + Shift + J no Firefox e veja oque aparece no console de erros.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

dê ids diferentes e informe isso qndo instanciar os carousseis

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carcleo    4

Carcleo
Postado

Mudar id de quê?

<label class="titulos">Anúncios</label>
<table>
<tr>
<td align="center" valign="top" colspan="2">
<div id="containerAnuncios">
  <div><a href="#" class="prev"><img src="img/anteriorAnuncios.png" width="30px" /></a></div>  
  <div id="carrosselAnuncios" style="float:left">
   <ul>
     <li><img src="<?php echo endereco_anuncios; ?>/foto.png" width="183px" /></li>
     <li><img src="<?php echo endereco_anuncios; ?>/foto.png" width="183px" /></li>
     <li><img src="<?php echo endereco_anuncios; ?>/foto.png" width="183px" /></li>
     <li><img src="<?php echo endereco_anuncios; ?>/foto.png" width="183px" /></li>
     <li><img src="<?php echo endereco_anuncios; ?>/foto.png" width="183px" /></li>
     <li><img src="<?php echo endereco_anuncios; ?>/foto.png" width="183px" /></li>
     <li><img src="<?php echo endereco_anuncios; ?>/foto.png" width="183px" /></li>
     <li><img src="<?php echo endereco_anuncios; ?>/foto.png" width="183px" /></li>
     <li><img src="<?php echo endereco_anuncios; ?>/foto.png" width="183px" /></li>
     <li><img src="<?php echo endereco_anuncios; ?>/foto.png" width="183px" /></li>
   </ul>
  </div>
  <div><a href="#" class="next"><img src="img/proximoAnuncios.png" width="30px" /></a></div>
</div>
</td>
</tr>
</table>

<script type="text/javascript">
  $(window).load(function () {
$("#carrossel").jCarouselLite({
btnPrev : '.prev',
btnNext : '.next',
auto    : 0,
speed   : 500,
visible : 5
})
})
</script>  

//Daqui esta o outro com id alterado mas ainda continua movendo os dois Carroussels

<script type="text/javascript">
  $(window).load(function () {
$("#carrosselAnuncios").jCarouselLite({
btnPrev : '.prev',
btnNext : '.next',
auto    : 0,
speed   : 500,
visible : 5
})
})
</script>

Veja por favor o comportamento no site:
http://www.dinamicaimoveis.com.br/morrodesaopaulo.inf.br/

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

mude o id dos botões next e prev

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carcleo    4

Carcleo
Postado

Pois é William Mas veja:

 

 <div><a href="#" class="prev"><img src="img/anteriorAnuncios.png" width="30px" /></a></div>

 

Não tem id

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

coloque!

ai qndo for instanciar:

<script type="text/javascript">
  $(window).load(function () {
$("#carrosselAnuncios").jCarouselLite({
btnPrev : '#prev1',
btnNext : '#next1',
auto    : 0,
speed   : 500,
visible : 5
})

$("#carrossel").jCarouselLite({
btnPrev : '#prev2',
btnNext : '#next2',
auto    : 0,
speed   : 500,
visible : 5
})


})
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carcleo    4

Carcleo
Postado

Sim. Fiz isso.

Mas ai ele para de funcionar pois não existe um código Js associado à este id.

 

No caso, eu precisaria ter outro arquivo jcarroussel.js e substituir nele onde esta escrito next por next1 por exemplo?

 

Seria isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Não.. ai vc só dá esses ids no seu html

 <div><a href="#" class="prev" id="prev1"><img src="img/anteriorAnuncios.png" width="30px" /></a></div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carcleo    4

Carcleo
Postado
Consegui:

Na hora de instanciar, estava sendo instanciado por classe e não por id.



<script type="text/javascript">

  $(window).load(function () {

 $("#carrossel").jCarouselLite({

btnPrev : '#prev1',

btnNext : '#next1',

auto    : 0,

speed   : 500,

visible : 5

 })

})

</script>  

<script type="text/javascript">

  $(window).load(function () {

 $("#carrosselAnuncios").jCarouselLite({

btnPrev : '#prev2',

btnNext : '#next2',

auto    : 0,

speed   : 500,

visible : 5

 })

})

</script>

E a como a instância passei a ser via id e não CSS, foi necessário tambem alterar o html



 <div id="containerAnuncios">

  <div><a href="#" class="prev" id="prev2"><img src="img/anteriorAnuncios.png" width="30px" /></a></div>

  <div id="carrosselAnuncios" style="float:left">

   <ul> 

     <li><img src="<?php echo endereco_anuncios; ?>/foto.png" width="183px" /></li>

     <li><img src="<?php echo endereco_anuncios; ?>/foto.png" width="183px" /></li>

     <li><img src="<?php echo endereco_anuncios; ?>/foto.png" width="183px" /></li>

     <li><img src="<?php echo endereco_anuncios; ?>/foto.png" width="183px" /></li>

     <li><img src="<?php echo endereco_anuncios; ?>/foto.png" width="183px" /></li>

     <li><img src="<?php echo endereco_anuncios; ?>/foto.png" width="183px" /></li>

     <li><img src="<?php echo endereco_anuncios; ?>/foto.png" width="183px" /></li>

     <li><img src="<?php echo endereco_anuncios; ?>/foto.png" width="183px" /></li>

     <li><img src="<?php echo endereco_anuncios; ?>/foto.png" width="183px" /></li>

     <li><img src="<?php echo endereco_anuncios; ?>/foto.png" width="183px" /></li>

   </ul>

  </div>

  <div><a href="#" class="next" id="next2"><img src="img/proximoAnuncios.png" width="30px" /></a></div>

 </div>

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