Jquery Page

Front-end

30/01/2014

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.

Curtidas 0

Respostas

Celiol.

Celiol.

30/01/2014

ola galera alguem sabe como possar fazer isso?
GOSTEI 0
Leandro Chiodini

Leandro Chiodini

30/01/2014

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,
GOSTEI 0
Celiol.

Celiol.

30/01/2014

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.
GOSTEI 0
Leandro Chiodini

Leandro Chiodini

30/01/2014

Uhm entendi

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


att,
GOSTEI 0
Celiol.

Celiol.

30/01/2014

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.
GOSTEI 0
Celiol.

Celiol.

30/01/2014

sabe como estou falando cara aina nao deu...
GOSTEI 0
Celiol.

Celiol.

30/01/2014

ta ai na imagem o problema galera.

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

Celiol.

30/01/2014

alguem sabe como posso fazer?
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

30/01/2014

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

Joel Rodrigues

30/01/2014

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>
GOSTEI 0
Celiol.

Celiol.

30/01/2014

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.
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

30/01/2014

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.
GOSTEI 0
Celiol.

Celiol.

30/01/2014

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

Miller.
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

30/01/2014

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

Celiol.

30/01/2014

blz valeu mesmo cara.
GOSTEI 0
POSTAR