0

Estou tentando mudar de imagem usando as setas NEXT e PREV.

HTML

<div id="imagem-galeria">
    {!! Html::image('img/quem-somos/galeria/foto-grande-1.jpg', 'Peças Colhedora de Cana', ['class' => 'img-main']) !!}
    {!! Html::image('img/quem-somos/seta-direita.png', 'Seta Direita', ['class' => 'seta-direita'] ) !!}
    {!! Html::image('img/quem-somos/seta-esquerda.png', 'Seta Esquerda', ['class' => 'seta-esquerda'] ) !!}
</div>

<div class="owl-carousel-galeria">
    <div class="item change-image"><div class="square"></div> {!! Html::image('img/quem-somos/galeria/torcane-foto-thumb-1.jpg', 'Foto 1') !!}</div>
    <div class="item change-image"><div class="square"></div> {!! Html::image('img/quem-somos/galeria/torcane-foto-thumb-2.jpg', 'Foto 2') !!}</div>
    <div class="item change-image"><div class="square"></div> {!! Html::image('img/quem-somos/galeria/torcane-foto-thumb-3.jpg', 'Foto 3') !!}</div>
    <div class="item change-image"><div class="square"></div> {!! Html::image('img/quem-somos/galeria/torcane-foto-thumb-4.jpg', 'Foto 4') !!}</div>
    <div class="item change-image"><div class="square"></div> {!! Html::image('img/quem-somos/galeria/torcane-foto-thumb-5.jpg', 'Foto 5') !!}</div>
    <div class="item change-image"><div class="square"></div> {!! Html::image('img/quem-somos/galeria/torcane-foto-thumb-6.jpg', 'Foto 6') !!}</div>
</div>

jQuery

// Próxima Imagem
$('.seta-direita').on(clickDeviceEvent, function(){
    var imgAtual    = $('.img-main').attr('src');

    // Continuação...
});

O elemento .img-main é onde vai a foto principal.

Tentei usar o next() e o prev() do jQuery, mas não consegui.
Qual é o caminho para fazer isso ?

Solução

jQuery

    var fotos   = new Array();
    fotos[0]    = "foto-grande-1.jpg";
    fotos[1]    = "foto-grande-2.jpg";
    fotos[2]    = "foto-grande-3.jpg";
    fotos[3]    = "foto-grande-4.jpg";
    fotos[4]    = "foto-grande-5.jpg";
    fotos[5]    = "foto-grande-6.jpg";

    // Próxima Imagem
    $('.seta-direita').on(clickDeviceEvent, function(){
        var imgAtual    = $('.img-main');
        fotoAtual       = fotoAtual + 1;

        if(fotoAtual == 6) 
            fotoAtual = 0;

        imgAtual.attr('src', urlBase + '/img/quem-somos/galeria/' + fotos[fotoAtual]);
    });

    // Anterior Imagem
    $('.seta-esquerda').on(clickDeviceEvent, function(){
        var imgAtual    = $('.img-main');
        fotoAtual       = fotoAtual - 1;

        if(fotoAtual < 0) 
            fotoAtual = 5;

        imgAtual.attr('src', urlBase + '/img/quem-somos/galeria/' + fotos[fotoAtual]);
    });

Ou

var urlsImgs = $.map($(".owl-carousel-galeria").find('img'), function(obj,
    return $(obj).attr('src').replace('thumb', 'grande');
});

// Próxima Imagem
$('.seta-direita').on(clickDeviceEvent, function(){
    var imgAtual    = $('.img-main');
    fotoAtual++;

    if(fotoAtual >= urlsImgs.length) {
        fotoAtual = 0;
    }
    imgAtual.attr('src', urlsImgs[fotoAtual]);
});

// Próxima Imagem
$('.seta-esquerda').on(clickDeviceEvent, function(){
    var imgAtual    = $('.img-main');
    fotoAtual--;

    if(fotoAtual < 0) {
        fotoAtual = (urlsImgs.length - 1);
    }
    imgAtual.attr('src', urlsImgs[fotoAtual]);
});

Pelo Erick Gallani

10
  • Seu código tá muito superficial. O elemento .img-main é a imagem que exibe o slide atual provavelmente, certo ? Porque então pegar o src e não da imagem alvo? O que essa template {!! .. !!} gera, elementos img ? Não conheço essa template, também não tem tag dela. Podia postar o código gerado, talvez fosse mais fácil pra nós. Se são gerados img não teria como usar next() e prev(). E o que é imgAtual, algum outro código lê essa variável ? Commented 22/09/2015 às 12:36
  • Diego qual componente jquery esta usando? $('.img-main') é o container onde fica a imagem principal que deve ficar mudando? Commented 22/09/2015 às 12:36
  • @ErickGallani, exatamente. Editei meu post explicando isso. Commented 22/09/2015 às 12:38
  • veja se isso pode lhe ajudar jsfiddle.net/8WTer Commented 22/09/2015 às 12:40
  • @DontVoteMeDown, o elemento .img-main é a foto principal. Clicar na foto do slider e mostrar na principal já está sendo feito. Mas eu quero fazer com setas também. Estou usando Laravel 5, não coloquei a tag porquê a minha necessidade não tem nada a ver com Laravel. Commented 22/09/2015 às 12:41

2 Respostas 2

5

Diego.

Imagino que o problema seja o seguinte.

Fazendo isso

var imgAtual = $('.img-main').attr('src');

Você está pegando o source da imagem sendo exibida e atribuindo ela a uma variável e ponto final, mais nada.

Na verdade você tem que alterar o source da imagem principal, fazendo assim.

$('.img-main').attr('src', urlDaImagem);

No evento de click.

O ideal era quando o DOM da página carregar armazenar todas as referências das imagens dentro da div owl-carousel-galeria em um array e então mudar a imagem no next e prev do img-main ao clicar nos respectivos eventos.

Tipo assim.

$('.seta-direita').on(clickDeviceEvent, function(){
    $('.img-main').attr('src', refsImgs[indexAtual]);
});

Onde refsImgs são todas URLs das imagens e indexAtual uma variável global armazenando o index atual do seu carrossel.

Legal que conseguiu!

Vou dar uma sugestão de implementação aqui, menos estático e mais dinâmico.

var indexAtual = 0;

        $(document).ready(function(){

            var urlsImgs = $.map($(".owl-carousel-galeria").find('img'), function(obj, index) { return $(obj).attr('src') });

            $('.seta-direita').on('click', function(){

                indexAtual++;

                if(indexAtual >= urlsImgs.length) {
                    indexAtual = 0; //se chegou ao final do array, volta para o primeiro item
                }

                $('.img-main').attr('src', urlsImgs[indexAtual]);
            });

            $('.seta-esquerda').on('click', function(){

                indexAtual--;

                if(indexAtual < 0) {
                    indexAtual = (urlsImgs.length - 1); //se chegou ao começo do array, volta para o úlitmo item
                }

                $('.img-main').attr('src', urlsImgs[indexAtual]);
            });
        });

http://jsfiddle.net/aykoga40/

10
  • Mano, isso é o código que comecei, não o final. Eu peguei o src da foto principal para fazer a substituição... Commented 22/09/2015 às 12:43
  • 1
    Certo, consegui entender seu problema. Veja minha última edição da resposta. Caso precise de mais ajuda com o código podemos ir lapidando para te ajudar. Commented 22/09/2015 às 12:46
  • Aí Mano ! Consegui usando sua lógica. Por isso que eu perguntei: qual é o caminho para fazer isso ? E você deu o caminho e não a solução pronta. Entendeu mesmo minha pergunta. Obrigado. Vou postar na minha pergunta a solução. Commented 22/09/2015 às 12:56
  • 1
    @DiegoSouza perfeito. Assim você aumenta a manutenabilidade da sua aplicação. Commented 22/09/2015 às 13:36
  • 1
    Pode sim. Fica melhor até Commented 22/09/2015 às 13:39
0

para resolver adicione o css:

 .slick-prev:before,
    .slick-next:before {
      color: black !important;
    }

Caso as classes tenham mudado, basta entrar na pasta do slick e verificar no arquivo index.html que tem os exemplos, e você pode ver o nome das classes das setas.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .