Question

我的代码中的第一个链接出现问题，它代表照片的缩略图，当您点击它时，它会扩展为更大的照片。我试图制作一个jsfiddle，但我找不到预制的jquery mbGallery.js的代码，所以我将尝试解释应该发生的事情：第一个代表一个phoo的拇指，当你点击它时，它会扩展，但我不能将它的方面修改为50x50，它显示原始照片的尺寸。因此，如果我有1000x1000照片，拇指将是1000x1000，但我仍然希望它自动调整大小到一个小图标，其中（x）x（y），x和y <1。 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;
}

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

1 个答案: