Medium ZoomはJavaScriptで写真をミディアムズームするスクリプト

<script src="node_modules/medium-zoom/dist/medium-zoom.min.js"></script>

      window.addEventListener('load', function () {
        // Add the zoom effect to the hero image
        const heroZoom = mediumZoom('.header__illustration img')
        // Handle the zoom on click on the button
        const zoomToTrigger = mediumZoom('#zoom-trigger')
        const button = document.querySelector('#btn-trigger')
        button.addEventListener('click', function () {
          zoomToTrigger.show()
        })
        // Add zooms to a container
        const containerZoom = [
          heroZoom,
          mediumZoom('#zoom-margin', {
            margin: 48
          }),
          mediumZoom('#zoom-background', {
            background: '#212530'
          }),
          mediumZoom('#zoom-scrollOffset', {
            scrollOffset: 0
          }),
          mediumZoom('#zoom-metaClick', {
            metaClick: false
          }),
          zoomToTrigger
        ]
        // Write in the journal an image is zoomed
        const journal = document.querySelector('#journal')
        containerZoom.forEach(function (zoom) {
          zoom.addEventListeners('show', function (event) {
            const time = (new Date()).toLocaleTimeString()
            journal.innerHTML += `<p>❯ "${event.target.alt}" was zoomed at ${time}`
          })
        })
      })

MITライセンス

• Tag
• Javascript