jquery - 如何在预制的 jquery 画廊中创建一个看起来像照片的链接？

Question

我对这段代码中的第一个链接有问题，它代表一张照片的缩略图，当你点击它时，它会展开成一张更大的照片。我试图制作一个 jsfiddle，但我找不到预制 jquery mbGallery.js 的代码，所以我将尝试解释应该发生什么: 第一个代表 phoo 的拇指，当你点击它时，它会展开，但我不能将它的纵横比修改为 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;
    }

Java

<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>

Answer 1

在您的 CSS 中编辑 .imgThumb。添加 max-width:100px 和 max-height:100px 然后它会自动调整图像大小。根据大小更改像素
例子。

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

.imgFull{
 max-width:500px;
max-height:500px;
}