2

サムネイルがクリックされたときにプライマリ画像を交換する次のコードがあります。

$('#thumbs img').click(function(){
    var imgsrc = $(this).attr('src');

    $('#mainphoto img').fadeOut(function(){
       $(this).attr('src', imgsrc).fadeIn();
    });
});

ここに実用的な例があります：http ：//clarkeconstructions.com.au/newsite/index.php？id = 8

一部の画像はポートレートショットであり、一部は横向きです（例の2番目のサムネイルをクリックした場合）。

画像を下にスライドさせて、横向きから縦向きへの移行をスムーズにしたいと思っていますが、現在のコードでどのように処理するかがわかりません。

誰かが私がこれを達成するためにどの構文を使用するかについてのヒントを私に与えることができますか？

ありがとう

4

2 に答える 2

2

使用できるトリックの1つは、次のとおりです。

  • すべての元の画像サイズを各画像data属性内に保存します
  • 内部画像をH：100％およびW：100％に設定して、コンテナをW/Hでアニメーション化します。

jsBinデモ

HTML：

<div id="projphotos">
  
  <div id="mainphoto"><img src="" /></div><!--MAINPHOTO-->
  
  <div id="projthumbs">
    <img src="images/image_1.jpg" /> 
    <img src="images/image_2.jpg" /> 
    <img src="images/image_3.jpg" /> 
  </div><!--PROJTHUMBS-->
  
</div>

CSS：

#mainphoto{ /* roXon */
   border-radius: 5px 5px 5px 5px;
   box-shadow: 0 0 5px #888888;
   padding: 10px;
   display:inline-block;
   *dispaly:inline;
   zoom:1;
   width:0;
   height:0;
}
#mainphoto img{
   position:relative;
   margin:0 auto;
   vertical-align:middle;
   width:100%;
   height:100%;
}
#projphotos img {
    /* removed properties */
    background-image: url("tmpimages/billie_holiday.png");
}

jQuery（元の画像サイズを保存/使用してメイン画像の親をアニメーション化する:)

$(window).load(function(){
  
  var imgs = $('#projthumbs img');

  $.each(imgs, function(i, el){
    $('<img>', {"src": this.src}).load(function(){
      $(el).data({'h': this.height, 'w': this.width});
      if(i===0){
        $(el).click(); 
      }
    });
  });
    
  $('#projthumbs img').click(function(){ 
      var imgsrc = this.src;
      var orgSize = { h: $(this).data('h'), w: $(this).data('w') };
  
      $('#mainphoto img').stop().fadeTo(400,0,function(){
         $(this).attr('src', imgsrc).fadeTo(400,1);
         $('#mainphoto').animate({height: orgSize.h, width: orgSize.w },400);
      });
  });
  
  $('#projthumbs img').eq(0).click();
});
于 2012-11-07T03:03:10.850 に答える
0

これを試してください、ここに作業サンプルがあります：http: //jsfiddle.net/mjaA3/216/

jQuery：

var thumbs = $('ul.thumbHolder li');
var bigImg = $('.mask img');
//You need to mask your image for creating sliding it down effect.

thumbs.first().addClass('selected');
thumbs.click(function() {

    var imgsrc = $(this).children('img').attr('src');

    bigImg.animate({'top':'266px'},300,function() {
       bigImg.attr('src', imgsrc ).animate({'top':'0px'},300);
    });

    thumbs.removeClass('selected');
    $(this).addClass('selected');
});

html：

<div class="mask">
      <img width="270" src="http://sample1.jpg" />
</div>
<ul class="thumbHolder">
   <li>
      <img width="20" src="http://sample1.jpg" />
   </li>
   <li>
      <img width="20" src="http://sample2.jpg" />
   </li>
   <li>
      <img width="20" src="http://sample3.jpg" />
   </li>
</ul>

css：

.mask {
        overflow:hidden; position:relative; left:0; top:0;
        float:left; margin:40px; width:400px; height:266px;
}
       .mask img { position:absolute; top:0px;left:0px; }

srcを使用しない別の方法：http：//jsfiddle.net/mjaA3/197/

于 2012-11-07T02:57:49.493 に答える