Ir para conteúdo

POWERED BY:

Arquivado

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

Nícolas Luís Huber

[Resolvido] Problema com Slide jCycle

Por , em Javascript

Recommended Posts

Nícolas Luís Huber    14

Nícolas Luís Huber
Postado

Olá comunidade iMaster, estou fazendo um slide show utilizando o plugin jCycle, deixo meu erro para vocês observarem, basta:

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
 $(function(){
$("#slideshow ul").cycle({
	fx: 'fade',
	speed: 2500,
	timeout: 5000,
	pager: '#nav',
	pause: true,
	pauseOnPagerHover: true,
	before: function(){
	  $('.titleSlide').slideUp('fast');
	},
	after: function(){
	  $('.titleSlide').slideDown('fast');
	}
})
 })
</script>
<style type="text/css">
#slideshow{width: 480px; height: 258px; position: relative; overflow: hidden; margin:0 0 10px 0; border: 1px solid #9D9D9D; background: #CCC;}
#slideshow ul{list-style: none;}
#slideshow  #nav {position: absolute; right: 5px; top: 5px; z-index: 1000;}
#slideshow  #nav a{text-decoration: none; padding: 3px 8px; margin:  0 0 2px 0; color: #FFF; background: #000; display: block;}
#slideshow  #nav  a.activeSlide{color:#000; background: #A5A5A5;}
#slideshow .titleSlide{width: 460px; display: none; padding: 10px 12px; background: url(img/bgTitleImg.png); position: absolute; color: #FFF; bottom: 0; z-index: 9999;}

</style>
</head>

<body>
<div id="slideshow">
<div id="nav"></div>
<ul>
<li><div class="titleSlide"><p>Please. If you don't <a href="#">shutup</a> I gonna Fuck your ass!</p></div><img src="http://img96.imageshack.us/img96/4843/72689495.png" alt="" /></li>
<li><div class="titleSlide"><p>Please. Dont' Cry</p></div><img src="http://img96.imageshack.us/img96/4843/72689495.png" alt="" /></li>
<li><div class="titleSlide"><p>Please. If you don't shutup I gonna Fuck your ass!</p></div><img src="http://img96.imageshack.us/img96/4843/72689495.png" alt="" /></li>
</ul>		
</div>
</body>
</html>

 

O problema se dá conforme vai passando os slides através do pager. A box preta que tem o título, quando passa de página vai parar no top, quando deveria permanecer no mesmo local, não sei se é erro de CSS ou jQuery, como posso corrigir?

 

Desde já muito obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

Achei estranho, pois na classe do titulo você colocou 

display:none;

ou seja não vai aparecer ..

 

Coloque isso no começo do seu CSS

 


*{
margin:0;
padding:0;
border:0

}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas Luís Huber    14

Nícolas Luís Huber
Postado

Descobri o problema! :clap: :clap:

 

coloquei na ul um position: static, pois este estava herdando do pai um position: relative.

 

Edit: O problema apenas não acontece mais no Mozzila, no Chrome ainda ta com problema.

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