简单的图片库:更改图像大小点击

Question

遇到了点小问题。我已经在谷歌上搜索了几个小时，但没有找到任何解决方案。有人知道一种方法来创建一个简单的图片库。我不需要什么特别的东西。这是代码:

<a href="images/bild3254.jpg"><img src="images/bild3254.jpg" width="30%" height="30%"></a>
<a href="images/bild3255.jpg"><img src="images/bild3255.jpg" width="30%" height="30%"></a>
<a href="images/bild3256.jpg"><img src="images/bild3256.jpg" width="30%" height="30%"></a>

正如你所看到的:非常基本的个人离线使用的画廊。所有图像都在同一时间加载。所有的图片都是由浏览器自己按比例缩小的。

到目前为止一切都很好。现在我的问题:我想要一个按钮，以改变该页面上的所有图像的大小(约100)在一个单一的链接或按钮单击。如何?

这意味着:SMALL LARGE (buttons)。当点击"大"时，它会变成原来大小的70%，点击"小"时，它会回到原来的30%。简单的大小切换。

不希望:

• 一次只能改变一张图片的大小
• 图像需要保持大尺寸直到下一次重新加载
• 原始尺寸的超链接仍然可用

有谁能帮帮我吗?

Answer 1

您可以使用此脚本动态更改大小，但我应该警告您，当使用百分比作为大小时，它实际上指的是容器，而不是图像的实际大小。所以70%是窗口的70%

var images = document.getElementsByTagName('img');
var resizeImages = function(size) {
  for (var i = 0; i < images.length; i++) {
    images[i].style.width = size;
    images[i].style.height = size;
  }
}
document.addEventListener('click', function(e) {
  if (e.target.id == 'small') {
    resizeImages('30%');
  }
  if (e.target.id == 'big') {
    resizeImages('70%');
  }
  if (e.target.id == 'toggle') {
    if (images[0].style.width == '30%') {
      resizeImages('70%');
    } else {
      resizeImages('30%');
    }
  }
}, false);

var images = document.getElementsByTagName('img');
var resizeImages = function(size) {
  for (var i = 0; i < images.length; i++) {
    images[i].style.width = size;
    images[i].style.height = size;
  }
}
document.addEventListener('click', function(e) {
  if (e.target.id == 'small') {
    resizeImages('30%');
  }
  if (e.target.id == 'big') {
    resizeImages('70%');
  }
  if (e.target.id == 'toggle') {
    if (images[0].style.width == '30%') {
      resizeImages('70%');
    } else {
      resizeImages('30%');
    }
  }
}, false);

<a href="images/bild3254.jpg">
  <img src="http://www.lorempixel.com/400/400/abstract" width="30%" height="30%">
</a>
<a href="images/bild3255.jpg">
  <img src="http://www.lorempixel.com/400/400/business" width="30%" height="30%">
</a>
<a href="images/bild3256.jpg">
  <img src="http://www.lorempixel.com/400/400/animals" width="30%" height="30%">
</a>
<a href="javascript:void(0)" id="small">Small</a>
<a href="javascript:void(0)" id="big">Big</a>
<a href="javascript:void(0)" id="toggle">Toggle</a>