0

このコードの最初のリンクに問題があります。これは写真のサムネイルを表しており、クリックすると大きな写真に拡大されます。jsfiddle を作成しようとしましたが、事前に作成された jquery mbGallery.js のコードが見つからなかったので、何が起こったのかを説明しようと思います: 最初はプーの親指を表し、クリックすると展開されます。しかし、アスペクトを 50x50 に変更することはできません。元の写真の寸法を示しています。したがって、1000x1000 の写真がある場合、親指は 1000x1000 になりますが、 (x)x(y) 、x および y < 100px の小さなアイコンに自動的にサイズ変更したい (これは一般的な形式で言ったので、写真はワイドでもポートレートでもかまいません）

html

<div  id="g1" class="galleryCont">
    <a class="imgThumb" src="img/activitate1/2008.jpg"></a>
    <a class="imgFull" href="img/activitate1/2008.jpg"></a>
    <div class="imgDesc">Description 01</div>

    <a class="imgThumb" src="img/activitate1/2009.jpg"></a>
    <a class="imgFull" href="img/activitate1/2009.jpg"></a>
    <div class="imgDesc">Description 02</div>

    <a class="imgThumb" src="img/activitate1/2010.jpg"></a>
    <a class="imgFull" href="img/activitate1/2010.jpg"></a>
    <div class="imgDesc">Description 02</div>
</div>

CSS

.galleryCont{
      display:none;
    }

ジャワ

<script type="text/javascript" src="js/mbGallery.js"></script>
  <script type="text/javascript">
    $(function(){
            $('#g1').mbGallery({maskBgnd:'#ccc',minWidth: 50, minHeight: 50, overlayOpacity:.9,startFrom: 0,addRaster:true, printOutThumbs:true});

    });
  </script>
4

1 に答える 1

2

CSS で.imgThumbを編集します。max-width:100pxとmax-height:100pxを追加すると、画像のサイズが自動的に変更されます。例のサイズに応じてピクセルを変更し
ます。

.imgThumb{
max-width:50px;
max-height:50px;
}

.imgFull{
 max-width:500px;
max-height:500px;
}
于 2013-03-11T10:12:53.247 に答える