paginação de botões e imagens com jcycle

[digophb 0]

Olá amigos como vão?

Talvez minha pergunta seja infantil e de fácil resolução mas o que eu encontrei em minhas pesquisas não foi o suficiente para que eu resolvesse o meu problema . Bem é o seguinte estou desenvolvendo um site de filmes em que a paginação de categoria seria um slide para cada categoria, e dentro desse slide as informações de vários filmes correspondentes. No caso eu fiz os botões para cada categoria e gostaria de que quando clicasse no botão fosse exibido o slide correspondente. O problema persistiria quando fosse linkar a imagem do filme com a descrição correspondente que seria exibida.

Até agora consegui implantar o plugin jcycle e linquei aos botões o problema é que aparecem a numeração do paginador dentro de cada botão e a chamada só é feita se clicar no número do botão.

Gostaria se possível que alguem pudesse me dar a solução por favor.

 

aqui está como se encontra até o momento para terem uma ideia do que fiz:

http://www.facefilmes.tk

no mozila não aparece o slide somente no chrome outra questão a se resolver.

 

 

Estes são os botões que criei cada um com uma categoria diferente:

 

<div class="centro">
<ul class="menu">
<li><a href="#"><div class="botao">Lançamentos</div></a></li>
<li><a href="#"><div class="botao">Terror</div></a></li>
<li><a href="#"><div class="botao">Comédia</div></a></li>
<li><a href="#"><div class="botao">Romance</div></a></li>


</ul>
</div>

e aqui ficam os slide(páginas das categoris correspondentes).

 

 

<div class="centro2">
<ul>
<li>
<div id="lancamentos"> <img src="imagens/Somos Tão Jovens.jpg" width="224" height="320" />aqui o conteudo lançamentos</div>
</li>
<li>
<div id="terror"> oi<img src="imagens/Um Caso Complicado.jpg" width="260" height="365" /> aqui o conteudo terror</div>
</li>
<li>
<div id="comedia"> <img src="imagens/umaladrasemlimites.jpg" width="250" height="350" />aqui o conteudo comedia</div>
</li>
<li>
<div id="romance"><img src="imagens/Ze Colmeia - O Filme.jpg" width="229" height="320" /> aqui o conteudo romance</div>
</li>
</ul>
</div>

Acredito que o css não é necessário no entanto aqui mostro como faço a chamada do script.

 

 

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function(){

$(".centro2 ul").cycle({
fx:'scrollLeft',
speed: 500,
timeout: 200000,
pager:'.botao',


})

})

</script>

 

Como faço para que o slide mude com o clicar do botão correspondente criado e como seria o mesmo processo caso em vez dos botões fosse utilisado imagens?

 

desde já agraço pela ajuda! no aguardo...

[Bergs 53]

ver esse exemplo se ajuda. http://jquery.malsup.com/cycle/pager2.html

[digophb 0]

O problema continua só que agora além de não ancorar nos botões que criei aparecem outros botões que não são desejáveis veja vc mesmo: http://www.facefilmes.tk

 

vou deixar o arquivo html, css e js para quem puder resolver esse problema:

http://www.mediafire.com/download/fu8eztny8z11usz/facefilmes.rar

 

por favor to precisando muito se tiver algum erro me avisem

 

grato pela ajuda

 

[Bergs 53]

Fiz algumas pequenas adaptações sobrescreva no seus arquivos

 

$(function(){
	
var botoes = ['Lançamentos','Terror','Comédia','Romance'];    

$(".centro2 ul").cycle({
	 fx:'scrollLeft', 
    speed: 'fast', 
     timeout: 8000, 
	 pager:'.menu',
	 pagerAnchorBuilder: function(idx) { 
        return '<li><a href="#"><div>'+botoes[idx]+'</div></a></li>'; 
    } 	 
    	
})

})

 

Tire todas as lis do menu deixe como abaixo:

 

<ul class="menu">
            
</ul>

 

Adicione essa marcação após div:hover no estilo.css

 

ul.menu li div:hover, ul.menu .activeSlide div

[digophb 0]

valeu parceiro vc é fera funcionou direitinho

o único problema agora é que a página do slide não abre no mozila firefox como eu ja havia falado no princípio, so ta abrindo no chrome e internet explore

tente abrir o link pelo mozila e veja vc mesmo http://www.facefilmes.tk

seria algum problema no mozila?

se souber agradeço

 

grato por tudo!

[Bergs 53]

Não não, é um problema do seu CSS.

[digophb 0]

foi como vc disse o erro dos navegadores era no css, em fim consegui, resolvido

inclusive a parte de chamada das imagens que ficam dentro da lista para outra lista de navegação

vou deixando a solução do problema para que outros possam se basear e quem sabe tbm resolver algo semelhante.

 

na função de chamada de imagem fica dessa forma:

 

 

$('.filmes').before('<ul class="nav">').cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '.nav',
prev: '#prev',
next:'#next',


// callback fn that creates a thumbnail to use as pager anchor
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"><img src="' + jQuery(slide).find('img').attr('src')+ '" width="70" height="90" /></a></li>';
}
});

 

 

Obrigado mais uma vez e boa sorte aos novos visitantes!