0

我对这段代码中的第一个链接有问题，它代表照片的缩略图，当您单击它时，它将展开为更大的照片。我试图制作一个 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;
    }

爪哇

<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

Edit the .imgThumb in your CSS. Add max-width:100px and max-height:100px and then it will automaticaly resize the image. Change the pixels depending on what size
Example. 

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

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