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

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}` }) }) })
Properties | Default |
---|---|
margin | 0 |
background | "#fff" |
scrollOffset | 48 |
metaClick | true |
MITライセンス