Fórum Jquery Page #468485

30/01/2014

0

Front-end

Ola galera estou com problemas, tenho 4 imagens e um texto que descritivo sobre cada uma blz, fiz um efeito com jquery para que ela rolasse pra cima assim:

<script type="text/javascript">
$(document).ready(function () {

$('.informacao').cycle({
fx: 'ScrollUp',
timeout: 4000,

});
});
</script>
deu tudo certo mas agora estou tentando ligar a rotação do texto pelo click nas imagens que coloquei quero parar a rolagem e fazer rolar apenas quando o ususario clicar em uma das imagens mas nao quero trocar a pagina quero com esse efeito mas nao esta dando certo vi comum tal de pagerAnchor mas nao sei como fazer ate deu certo mas ele esta criando uns numeros ao lado da imagem e esta fazendo o que eu quero mas nao pelas imagens e sim por esses numeros.

<script type="text/javascript">
$(document).ready(function () {

$('.informacao').before('<div id="menu_design">').cycle({
fx: 'fade',
timeout: 0,
pager: '.menu_design',

pagerAnchorBuilder: function (idx, slide) {
return '<a href="#" ><img src=" ' + idx +'" width="37px" height="37px" /></a>';
}
});
});
</script>

<div id="menu_design">
<a href="#" ><img src="images/html5.jpg" class="btn_html" width="37px" height="37px" alt="" /></a>
<a href="#" ><img src="images/ajax.png" class="btn_ajax" width="37px" height="37px" alt="" /></a>
<a href="#" ><img src="images/css.jpg" class="btn_css" width="37px" height="37px" alt="" /></a>
<a href="#" ><img src="images/jquery.png" class="btn_jquery" width="37px" height="37px" alt="" /></a>

</div>

aqui e o codigo galera. Abraços Miller.
Celiol.

Celiol.

Responder

Posts

06/02/2014

Celiol.

ola galera alguem sabe como possar fazer isso?
Responder

Gostei + 0

06/02/2014

Leandro Chiodini

amigao da uma olhada nesse lingk


[url:descricao=eufacoprogramas.com/criando-um-slideshow-carrossel-com-jquery/‎]eufacoprogramas.com/criando-um-slideshow-carrossel-com-jquery/‎[/url]



Att,
Responder

Gostei + 0

06/02/2014

Celiol.

xiiii Leandro valeu pr ajudar cara mas o link que você postou nao apareceu nada deu 404, mas pelo que vi nao bem isso cara, carrossel ja utilizei, só pra esclarecer eu tenho uns tectos descritivos com efeitos do jquery fade funcionando blz. e acima deles tenho um pequeno menu que na verdade são as próprias imagens dos textos mas quero que o efeito so funcione quando o cara clicar na imagem para poder ler o texto e nao que fique rotacionando entendeu.

abraços cara Miller.
Responder

Gostei + 0

07/02/2014

Leandro Chiodini

Uhm entendi

é que o carrosel tu consegue fazer como voce tava descrevendo acima,
de parar com o clique..


att,
Responder

Gostei + 0

08/02/2014

Celiol.

entao cara e que na verdade eu quero que ele inicie com texto da primeira imagem e so gira quando o cara clicar na image, ai vem o texto referente a imagem que ele clicou entendeu.
Responder

Gostei + 0

10/02/2014

Celiol.

sabe como estou falando cara aina nao deu...
Responder

Gostei + 0

20/02/2014

Celiol.

ta ai na imagem o problema galera.

[img:descricao=problema com jquery]http://arquivo.devmedia.com.br/forum/imagem/335183-20140220-215936.png[/img]
Responder

Gostei + 0

25/02/2014

Celiol.

alguem sabe como posso fazer?
Responder

Gostei + 0

27/02/2014

Joel Rodrigues

Amigo, vou tentar implementar algo aqui e lhe darei um retorno assim que tiver algo pronto. Farei o possível para não demorar.
Responder

Gostei + 0

27/02/2014

Joel Rodrigues

Amigo, fiz algo aqui que talvez lhe ajude.
Copie o código abaixo completo e salve como .html. Coloque no mesmo diretório 4 imagens (img1.png, img2.png, img3.png e img4.png) para que o exemplo funcione corretamente.
<!doctype html>
<html>
<head>
    <title>Banner</title>
    <style>
    #banner{
        border:1px solid;
        width:600px;
    }
    #banner #icons .icon{
        width: 48px;
        height: 48px;
    }
    #banner #icons .icon:hover{
        border:1px solid;        
        width: 46px;
        height: 46px;        
    }
    #banner #icons{
        text-align: center
    }
    #banner #icons .active-icon{
        border:1px solid red;        
        width: 46px;
        height: 46px;  
    }
    #banner #contents{     
        overflow: hidden
    }
    #banner #contents div.content{
        display: none;
        text-align: center
    }    
    #banner #contents div.active-content{
        display: block;
    }
    </style>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script>
        $(function(){
            $(".icon").click(function(){
                $("#banner #icons .icon").removeClass("active-icon");
                $(this).addClass("active-icon");
                var index = $(this).index() + 1;
                $(".content").css("display", "none");
                var content = $("#banner #contents .content:nth-child("+index.toString()+")");                
                $(content).fadeIn(1000);
            });
        });
    </script>
</head>
<body>
    <div id="banner">
        <div id="icons">
            <img src="img1.png" class="icon active-icon"/>
            <img src="img2.png" class="icon"/>
            <img src="img3.png" class="icon"/>
            <img src="img4.png" class="icon"/>
        </div>
        <div id="contents">
            <div class="content active-content">Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 </div>
            <div class="content">Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 3 </div>
            <div class="content">Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 </div>
            <div class="content">Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 </div>
        </div>
    </div>
</body>
</html>
Responder

Gostei + 0

27/02/2014

Celiol.

poxa cara era exatamente isso que estou tentando fazer certinho valeu mesmo pela ajuda, estava faltando esta parte no meu

     $(this).addClass("active-icon");
                var index = $(this).index() + 1;
                $(".content").css("display", "none");
                var content = $("#banner #contents .content:nth-child("+index.toString()+")");

por isso acho que não funcionava e no meu class eu não tinha este active icon ele muda alguma coisa cara ou é apenas um nome da class?

muito obrigado era exatamente isso.
Responder

Gostei + 0

27/02/2014

Joel Rodrigues

A classe active-icon eu criei apenas para dar um destaque a imagem que estiver selecionada. Nesse caso, eu botei uma borda vermelha, nada mais.
TALVEZ você encontre algum trecho desse código que possa ser removido ou otimizado, pois eu fui fazendo e não revisei.
Abraço.
Responder

Gostei + 0

28/02/2014

Celiol.

ha cara eu arrumei aqui com ta tudo certinho muito obrigado.

Miller.
Responder

Gostei + 0

28/02/2014

Joel Rodrigues

Show de bola então. Fico feliz por ter ajudado.
Tópico concluído.
Responder

Gostei + 0

28/02/2014

Celiol.

blz valeu mesmo cara.
Responder

Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar