Question

This is my code now.

http://workshop.rs/demo/gallery-in-4-lines/

$('#thumbs').delegate('img','click', function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});

But i want to fade how this example?

http://www.ak-solutions.de/demos/fader/

more slowly from the picture to the next picture?

I have try this code, But this is not the right.

$('#thumbs').delegate('img', 'click', function() {
$('#panel').attr('src', $(this).attr('src')).hide().fadeIn(1000);
});

Answer 1

jsBin demo

$('.thumbs').on('click','img', function(){
        var $thisPanel = $(this).parents('.gallery').find('.panel');
        var clone = $(this).clone().hide();
        clone.appendTo($thisPanel);
        $thisPanel.find('img').eq(0).fadeTo(600,0,function(){
           $(this).remove();
        });
        clone.fadeTo(600,1);  
        $('.description').html($(this).attr('alt'));
});

The modified CSS:

  .thumbs { padding-top: 10px; overflow: hidden;}
    .thumbs img, .panel img {
     border: 1px solid gray;
     padding: 4px;
     background-color: white;
     cursor: pointer;
    }
  .panel img{
    position:absolute;
  }
    .thumbs img {
     float: left;
     margin-right: 3px;
    width:100px;
    }
    .description {
     background: black;
     color: white;
     position: absolute;
     z-index:2;
     bottom: 0;
     padding: 10px 20px;
     width: 525px;
     margin: 5px;
    }