【Javascript】写真をミディアムズーム。Medium Zoom

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}`
})
})
})

Options

Properties Default
margin
background "#fff"
scrollOffset 48
metaClick true

MITライセンス

 
Medium Zoom

【Javascript】写真をミディアムズーム。Medium Zoom

  • LATEST
  • RELATED
  • POPULAR