Увеличение / уменьшение изображения с помощью прокрутки изображения или нажатием кнопки +/-

Question

У меня есть несколько бритвенных страниц, каждая из которых содержит от 1 до 3 изображений.

Я хочу, чтобы при наведении на них и прокрутке увеличение или уменьшение масштаба зависело от направления прокрутки или от нажатия кнопки + / - увеличить или уменьшить изображение.

также я хочу применить ко всем изображениям, не учитывая, сколько изображений на странице. я имею в виду быть применимым с использованием querySelectorAll или что-то в этом роде

что-то вроде googlemap zoom, но для изображений (jpg / png /...)

лучше чтобы все было написано в JavaScript

есть какая-нибудь библиотека, в которой были упомянуты опции?

есть ли какой-нибудь веб-сайт с учебным пособием?

, который я нашел, был https://www.jacklmoore.com/wheelzoom/, но нет кнопки +/- suport

заранее спасибо.

Answer 1

Я пробовал нечто похожее на моем предыдущем проекте, возможно, попробуйте использовать следующий ресурс в качестве ориентира:

https://ihatetomatoes.net/how-to-zoom-into-an-image-on-scroll/

Вы можете попробовать использовать сценарий, который они предлагают:

<script src="js/skrollr.js"></script>

Answer 2

Подход, который я выбрал бы, состоит в том, чтобы динамически создавать и вводить кнопки с помощью прослушивателей событий для увеличения / уменьшения изображений. Ниже приведен пример того, что я имею в виду, дайте мне знать, если вам нужна помощь в понимании каких-либо его частей,

const scaleUp = image =>
{
  const scale = parseFloat(image.getAttribute('scaler'));
  image.style.transform = `scale(${scale + 0.1})`;
  image.setAttribute('scaler', Math.max(0, scale + 0.1));
};

const scaleDown = image =>
{
  const scale = parseFloat(image.getAttribute('scaler'));
  image.style.transform = `scale(${scale - 0.1})`;
  image.setAttribute('scaler', Math.max(0, scale - 0.1));
};

(async () =>
{
  const images = document.querySelectorAll('img');
  
  const buttonContainer = document.createElement('div');
  buttonContainer.style.position = 'absolute';
  buttonContainer.style.bottom = '15px';
  buttonContainer.style.width = '100%';
  buttonContainer.style.textAlign = 'center';
  
  for (let image of images)
  {
    await image.decode();
    const container = document.createElement('div');
    container.style.position = 'relative';
    container.style.display = 'inline-block';
    container.style.overflow = 'hidden';
    container.style.width = image.clientWidth;
    container.style.height = image.clientHeight;
    
    const containerImage = image.cloneNode();
    containerImage.setAttribute('scaler', '1');
    
    const plusButton = document.createElement('button');
    const minusButton = document.createElement('button');
    plusButton.textContent = '+';
    minusButton.textContent = '-';
    
    plusButton.addEventListener('click', () => scaleUp(containerImage), true);
    minusButton.addEventListener('click', () => scaleDown(containerImage), true);
    
    container.addEventListener('wheel', event =>
    {
      event.preventDefault();
      
      if (event.deltaY < 0) 
        scaleUp(containerImage);
      else if (event.deltaY > 0)
        scaleDown(containerImage);
    }, true);
    
    const imageButtonContainer = buttonContainer.cloneNode();
    imageButtonContainer.appendChild(minusButton);
    imageButtonContainer.appendChild(plusButton);
    
    container.appendChild(containerImage);
    container.appendChild(imageButtonContainer);
    image.replaceWith(container);
  }
})();

<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/001.png" />
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/002.png" />
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/003.png" />
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/004.png" />
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/005.png" />
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/006.png" />