Ir para conteúdo
Fórum Script Brasil
  • 0

Estilizar itens galeria de imagens (jQuery)


Vithor

Pergunta

Olá galera!

Estou desenvolvendo um site, e deixei este item por último porque sabia que iria ter problemas com ele...

Tenho que criar uma galeria de imagens com 3 itens, que contenham os índices (1, 2 e 3) para o usuário clicar a qualquer momento em um deles, mas eles também devem passar dinamicamente (sem o usuário clicar).

Achei um script que creio poder usar, bem interessante, aqui:

Galeria com paginador

Só que eu estou tendo problemas para estilizar os itens (1, 2 e 3), e tenho que deixá-los dessa forma (layout):

layoutjv.jpg

Caso a imagem não apareça acima, o link é: http://img191.imageshack.us/i/layoutjv.jpg/

Vocês podem me ajudar?!

EDIT

Galera, consegui estilizar. Mas agora tá tendo um problema: os links não são criados... O link que "chamaria" a 2ª imagem (ao clicar no botão 2) não existe para nenhuma imagem... O que fazer?!

Editado por Vithor
Link para o comentário
Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

  • 0

Pronto, tá tudo certo... QUASE!

Galera, o código tá o seguinte:

<script type="text/javascript"> 
$(function() {
    $('.anuncios').cycle({
        fx:        'fade',
        speed:     2000,
        timeout:   5000,
        pager:     '#nav',
    slideExpr: 'img'
    });
});
</script>

Só que tem uma coisa: cada "slide" é como se fosse um link, para uma página interna. Por exemplo, no post acima, tem uma imagem de conexões, e esse é um link. Na próxima imagem, vai ter outro link, e assim por diante.

Como eu implemento isso?

Link para o comentário
Compartilhar em outros sites

  • 0

Bom, só eu me ajudei :P

Mas vou deixar a solução, caso alguém queira (não está ótimo, em nível de programação, mas faz o que precisa fazer, então...)

<script>
function link_the_page(curr, next, opts) {
    if (this.alt != '')
    {
        var addr = this.alt; // pega o ALT da imagem
        $('#home_3').click(function(){
        if(event.target.nodeName == "IMG")    // se clicou na imagem e NÃO no índice (seletor de imagem - que é um A (link))
            window.location = "?navega="+addr;
        });
        $('#home_3').css("cursor", "pointer");
    }
    else
        $('#home_3').css('cursor', 'default');
}

$(function() {
    $('.anuncios').cycle({
        fx:        'fade',
        speed:     2000,
        timeout:   5000,
        pager:     '#nav',
        slideExpr: 'img',
        after: link_the_page
    });
});
</script>

<div id="home_3">
    <div class="anuncios">
        <div id="nav"></div>
        <img src="teste.jpg" width="402" height="173" alt="contato" />
        <img src="teste_2.jpg" width="402" height="173" alt="equipe" />
        <img src="teste_3.jpg" width="402" height="173" alt="orcamento" />
    </div>
</div>

Editado por Vithor
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...