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
.img-main
é a imagem que exibe o slide atual provavelmente, certo ? Porque então pegar osrc
e não da imagem alvo? O que essa template{!! .. !!}
gera, elementosimg
? 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 geradosimg
não teria como usarnext()
eprev()
. E o que éimgAtual
, algum outro código lê essa variável ?.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 usandoLaravel 5
, não coloquei a tag porquê a minha necessidade não tem nada a ver comLaravel
.