Реагируйте на галерею изображений с эффектом увеличения как Amazon

Question

Я пытаюсь объединить react-image-gallery с react-image-magnify, чтобы получить галерею с эффектом предварительного просмотра увеличения, и в соответствии с react-image-gallery документами, я передаю MyReactImageMagnify компонент в renderItem реквизит компонента ImageGallery, но естьнет увеличенного изображения с правой стороны.

Вот как должна выглядеть галерея с увеличением https://www.amazon.com/Samsung-MicroSD-Adapter-MB-ME128GA-AM/dp/B06XWZWYVP

А вот коды и поле с тем, что у меня есть https://codesandbox.io/s/goofy-lumiere-gk1y1

class MyImageGallery extends Component {
  myRenderItem() {
    return <MyReactImageMagnify {...this.props} />;
  }

  render() {
    const properties = {
      thumbnailPosition: "left",
      useBrowserFullscreen: false,
      showPlayButton: false,
      renderItem: this.myRenderItem.bind(this),
      items: [
        {
          original: "https://placeimg.com/640/480/any/1",
          thumbnail: "https://placeimg.com/250/150/any/1"
        },
        {
          original: "https://placeimg.com/640/480/any/2",
          thumbnail: "https://placeimg.com/250/150/any/2"
        },
        {
          original: "https://placeimg.com/640/480/any/3",
          thumbnail: "https://placeimg.com/250/150/any/3"
        }
      ]
    };

    return <ImageGallery {...properties} />;
  }
}

Редактировать: Amazon только для иллюстрации "увеличить вправо".Я сделал еще одно кодовое поле с сеткой из 2 столбцов, вы можете видеть, как работает простой компонент <MyReactImageMagnify />, а <MyImageGallery /> - нет.https://codesandbox.io/s/practical-browser-0dbyo

Answer 1

Я проверил изображение по предоставленной вами ссылке и нашел этот элемент:

<div
    id="magnifierLens"
    style="position: absolute; background-image: url(&quot;https://images-na.ssl-images-amazon.com/images/G/01/apparel/rcxgs/tile._CB483369105_.gif&quot;); cursor: pointer; width: 300px; height: 316px; left: 184px; top: 169px;">
</div>

Для синего наложения на изображение, а затем для предварительного просмотра - просто абсолютное значение div, содержащее исходное изображение без размера. Изображение в окне предварительного просмотра расположено аналогично линзе лупы.

Отсюда вам нужно получить пропорции для наложения изображения и предварительного просмотра изображения.

Похоже, то, что сделал Amazon, содержало измерения информационного элемента продукта:

Чтобы сохранить размеры, вам нужно прикрепить resize прослушиватель событий к окну

window.addEventListener('resize', onWindowResize); // onWindowResize function would get new component size and update child sizes

Затем вы будете отслеживать положение мыши над изображением:

previewImageElement.addEventListener("mousemove", onMouseMove); // onMouseMove function would update the position of the image overlay, and zoomed image

Как только вы настроите все свои обработчики и слушатели, вы можете рассчитать некоторые размеры и реализовать их.

Вот некоторый псевдокод для расчета размеров:

 // Amazons zoom frame has a max size, and it will shrink to fit the zoomed image
const imageOverlayWidth = Math.Max(zoomedFrameWidth / zoomedImageWidth, 1) * imagePreviewWidth;
const imageOverlayWidth = Math.Max(zoomedFrameHeight / zoomedImageHeight, 1) * imagePreviewHeight;

zoomedImageHeight и zoomedImageWidth - естественные размеры изображения.

Расчет zoomedFrameWidth и zoomedFrameHeight будет зависеть от того, насколько отзывчивым будет ваш предварительный просмотр. Лично я был бы в порядке с максимальными размерами, но без усадки.

zoomedFrameWidth = productInfoContainerWidth * 0.5;
zoomedFrameHeight = productInfoContainerHeight;

Этого должно быть достаточно, чтобы связать хороший предварительный просмотр изображения, как у Amazon. Дайте мне знать, если что-то нуждается в разъяснении, так как это в основном только идеи и psuedocode.