2

Criei uma pequena galeria de imagens utilizando essa estrutura:

<div class="slider">
<div class="dest">
    <img src="http://www.imagebrowse.com/wp-content/uploads/2013/08/astonishing-aristic-mobile-background-wallpaper-background.jpg" alt="suites-slider-dest">
</div>
<div class="navbar">
    <img src="http://www.imagebrowse.com/wp-content/uploads/2013/08/marvellous-water-drops-background-2013.jpg">
    <img src="http://www.imagebrowse.com/wp-content/uploads/2013/08/marvelous-beautiful-autum-tree-wallpaper-background.jpg">
</div>

Com o CSS:

img
{
    max-width: 100%;
}

.slider
{
    display: inline-block;
    padding: 75px 0;
}

.dest img
{
    border: 5px solid #fff;
    box-shadow: rgba(0,0,0,0.5) 0 0 15px;
    float: left;
    margin-right: 15px;
    width: 70%;
}

.navbar
{
    float: left;
    margin-left: 10px;
    width: 17%;
}

.navbar img:first-child
{
    margin-top: 0 !important;
}

.navbar img
{
    border: 5px solid #fff;
    box-shadow: rgba(0,0,0,0.5) 0 0 15px;
    cursor: pointer;
    display: block;
    margin-top: 15px;
    opacity: 0.5;
}

.navbar img:hover
{
    opacity: 1;
}

E o JQuery:

$(".navbar img").click(function()
{
    var dest = $(".dest img").attr('src');
    var icon = $(this).attr('src');

    $(this).removeAttr('src');
    $(this).attr('src', dest);
    $(".dest img").removeAttr('src');
    $(".dest img").attr('src',icon);
});

O código está funcional mas preciso que a transição da imagem dentro da div com a classe "dest" seja suave. Como posso fazer isso?

Código

2 Respostas 2

2

Solução com efeito FadeIn / FadeOut

Para que possas dar um efeito à troca de imagem, é preciso fazer uma pequena alteração no CSS para que os estilos da imagem passem para o elemento que a envolve, dado que quando aplicas um fadeIn/fadeOut à imagem a mesma deixa de estar presente no decorrer desse efeito e quebra o layout.

Exemplo no JSFiddle

CSS Alterado

.dest {
    border: 5px solid #fff;
    box-shadow: rgba(0,0,0,0.5) 0 0 15px;
    float: left;
    margin-right: 15px;
    width: 70%;
}
.dest img{
    min-width:100%;
    float:left;
}

jQuery com uso do fadeIn() e fadeOut()

// pré-carregar imagens
var preloadImages = [];
$('.slider img').each(function() {
    preloadImages.push($(this).attr('src'));
});
$.each(preloadImages, function () {
    $('<img/>').attr('src', this);
});



// Evento click para trocar imagem
$(".navbar img").click(function() {

    var $mini  = $(this),
        $dest  = $(".dest img"),
        oldSrc = $dest.attr('src');

    // envolvemos o código da troca da imagem pelo método fadeout
    $dest.fadeOut( "slow", function() {
        $dest.on('load', function() {
            $dest.fadeIn("slow");  // acabamos tudo, apresentamos com fadeIn
        }).attr('src', $mini.attr('src'));
        $mini.attr('src', oldSrc);
    });
});

Nota: Ver "Resposta Original" para restante explicação do código.


Resposta Original

Recorrendo a JavaScript e jQuery a minha solução passa por pré-carregar as imagens do slider para que quando as mesmas são trocadas da miniatura para a imagem grande e vice-versa não se notem falhas:

Exemplo no JSFiddle

Pré-Carregar

// matriz vazia para guardar os caminhos das imagens
var preloadImages = [];

// por cada imagem encontrada dentro da estrutura do slider
$('.slider img').each(function() {

    // guardar o caminho na matriz
    preloadImages.push($(this).attr('src'));
});

// por cada entrada na matriz, carregar a imagem com novo objecto do DOM
$.each(preloadImages, function () {
    $('<img/>').attr('src', this);
});

Trocar imagens

O teu código funciona, mas eu estou a deixar uma sugestão para o optimizares:

// Evento click para trocar imagem
$(".navbar img").click(function() {

    var $this  = $(this),           // coloca em cache o elemento chave
        $dest  = $(".dest img"),    // coloca em cache o elemento dest
        oldSrc = $dest.attr('src'); // guarda a imagem antiga

    // anexa evento que espera pelo carregamento da imagem
    $dest.on('load', function() {

        // troca o caminho na tag "img" da miniatura,
        // para apontar para a  imagem que estava em ponto grande
        $this.attr('src', oldSrc);

    }).attr('src', $this.attr('src')); // troca a imagem grande pela miniatura
                                       // tem que ser feito após anexado o evento "load"
});
6
  • Ainda assim a transição não é suave. Como poderia conseguir esse efeito? 4/03/2014 às 0:30
  • @JoãoPauloSaragossa Elabora o que entendes por suave! Queres um efeito visual? Tipo Desvanecer e aparecer suavemente?
    – Zuul
    4/03/2014 às 0:31
  • Exatamente, como se fosse um fade out/fade in. Já tentei incorporar essas funções ao código mas não obtive sucesso. 4/03/2014 às 0:34
  • Ok, vou alterar a resposta, mas tenho que dar um jeito no teu HTML.
    – Zuul
    4/03/2014 às 0:35
  • @JoãoPauloSaragossa Actualizei a resposta com uma versão contendo os efeitos.
    – Zuul
    4/03/2014 às 0:50
0

Você está alterando as imagens pelo atributo src da tag <img />. Já utilizei esse tipo de técnica mas recomendo utilizar outra.

Exiba todas as imagens do slider na página, assim você não terá problemas com o carregamento. Trabalhe com displays nas imagens, por exemplo, você pode exibir todos os elementos na página, a imagem em foco deve estar sempre com display: block, ou display: inline-block, enquanto as outras estão com display: none, assim você não precisará trocar o atributo src, mas sim exibinr e esconder as imagens.

A respeito do efeito suave, você pode fazer esse esquema utilizando as funções .fadeIn() e .fadeOut() do jQuery.

Outra dica: esse tipo de slider existe aos montes na internet, segue o link de um que eu costumo usar quando não exige muita particularidade: http://bxslider.com/.

Esse slider é excelente. Eu percebi que você está utilizando uma miniatura da imagem como paginador do slider, e o BXSlider possibilita isso, dá uma olhada na documentação e nas opções. Ele tem uns efeitos bem legais e não é muito pesado.

4
  • Obrigado pela dica do bxslider, embora eu queira fazer o meu do zero mesmo. Se nada funcionar irei usá-lo! 4/03/2014 às 0:31
  • João, se você ainda não conseguiu o efeito desejado, tenta fazer isso que lhe falei, carregue todas as imagens no teu html, e então trabalhe com os displays usando o fadeIn() e fadeOut() do jquery, é bem facinho! Sorte aí cara! ;D 4/03/2014 às 0:39
  • Outra coisa, esse sistema de trabalhar com os displays é muito melhor, pois você não vai precisar recarregar uma imagem a cada transição. 4/03/2014 às 0:40
  • Esse é um dos sites feitos pela agência em que eu trabalho, eu fiz esse banner aí, dá uma olhada, quem sabe lhe ajuda: giftpalace.com.br 4/03/2014 às 0:47

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 .