Solution with FadeIn / FadeOut effect

In order for you to give an effect to the image exchange, you need to make a small change in the CSS so that the styles of the image change to the element that surrounds it, since when you apply a fadeIn / fadeOut to the image it stops be present in the course of that effect and break the layout.

Example in JSFiddle

Changed CSS

.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 using fadeIn () and 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);
    });
});

Note: See "Original Response" for further explanation of the code.

Original Response

Using jQuery and JavaScript, my solution is to pre-load the images of the slider so that when they are changed from the thumbnail to the big image and vice versa, no glitches are noticed:

Example in JSFiddle

Preload

// 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);
});

Switching images

Your code works, but I'm leaving a suggestion to optimize it:

// 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"
});

You are changing the images by the src attribute of the <img /> tag. I already used this type of technique but I recommend using another one.

Show all slider images on the page, so you will not have problems uploading. Work with displays in images, for example, you can display all the elements on the page, the focus image should always be display: block , or display: inline-block , while others are with display: none , so you do not have to change the attribute src , but rather display and hide the images.

Regarding the soft effect, you can do this scheme using the .fadeIn() and .fadeOut() functions of jQuery.

Another tip: this type of slider exists in the hills on the internet, follow the link of one I usually use when it does not require much particularity: link .

This slider is great. I realized that you are using an image thumbnail as a slider pager, and BXSlider does this, take a look at the documentation and the options. It has very cool effects and is not very heavy.