Question

How i get in this code a fade effect?
When i click on the thumbs, the should fade the “big” picture!

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

<div class="box">
        <div id="panel"><img id="largeImage" src="pic/image_08_large.jpg" /> </div>
        <div class="text"> Die Idee und das Konzept</div>
        <div id="thumbs">
        <img src="pic/image_08_thumb.jpg" alt="1st image description" />
        <img src="pic/image_09_thumb.jpg" alt="2nd image description" />
        <img src="pic/image_10_thumb.jpg" alt="3rd image description" />

        </div>

Javascript

<script>

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

</script>

css:

#thumbs { padding-top: 10px; overflow: hidden; }
#thumbs img, #largeImage { border: 1px solid gray; padding: 4px; 
background-color:white; cursor: pointer; }
#thumbs img { float: left; margin-left:60px;  margin-top:10px; }
#description { background: black; color: white; position: absolute; bottom: 0;   
padding: 10px 20px; width: 525px; margin: 5px; }
#panel { position: relative; }

Answer 1

With your code you cannot achieve the desired effect. So you’ll need to:

• (…to get the desired efx:) have 2 images placed inside the ‘panel’ (you can clone the clicked one!)
• Than you need to 1: place the clone in place (needs to be hidden initially)
• 2: fade the old image
• 3: fade In the clone (new) image like:

jsBin demo example

$('.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'));
});

Don’t use ID for elements that are multiple on your page, instead use class. (See the demo):

<div class="gallery">
    <div class="panel">
        <img src="http://placehold.it/565x300/cf5" />
        <div class="description">First image description</div>
    </div>
 
    <div class="thumbs">
        <img src="http://placehold.it/565x300/cf5" alt="1st image description" />
        <img src="http://placehold.it/565x300/f0f" alt="2nd image description" />
        <img src="http://placehold.it/565x300/444" alt="3rd image description" />
    </div>
</div>

And the 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;
    }
  .panel { position: relative; height:310px; }