javascript - изменить размер всех изображений по клику

Question

Я создаю своего рода галерею изображений и хочу, чтобы пользователи могли выбирать между маленькими, средними и большими миниатюрами, чтобы они менялись без перезагрузки страницы. Что такое Jaavascript, чтобы при щелчке мышью по кнопке все изображения определенного класса динамически изменяли размер?

Answer 1

С jQuery:

$('input#foobar').click(function()
{
  var newHeight = 200;

  $('img.foo').each(function()
  {
    if ($(this).height() > 200)
    {
      $(this).css('height', parseInt(newHeight * $(this).css('width') / $(this).css('height')) + 'px');
    }
  });
});

Нет гарантий, что это будет работать идеально, но вы можете, по крайней мере, построить его, чтобы добавить различные приращения размера и т. Д.

Answer 2

настроить классы для ваших разных размеров.

$('input#small').click( function()
{
    $('img').removeClass('large medium').addClass('small');
}

$('input#medium').click( function()
{
    $('img').removeClass('large small').addClass('medium');
}

$('input#large').click( function()
{
    $('img').removeClass('medium small').addClass('large');
}

Answer 3

var allImgs = document.getElementsByTagName('img'),
    allImgsLength = allImgs.length,
    className = 'something';


for (var i = 0, i < allImgsLength; i++) {
   var image = allImgs[i];

   if (image.className.match(new RegExp('\b' + className + '\b')) {
       // Set what sizes you need
       image.style.width = '400px';
       image.style.height = '200px';

   }

}