1

これが私のコードです。

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

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

しかし、私はこの例をどのようにフェードしたいですか？

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

写真から次の写真へとゆっくりと？

私はこのコードを試しましたが、これは正しくありません。

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

1 に答える 1

0

jsBin デモ

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

変更された 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;
    }
于 2012-05-26T07:18:23.180 に答える