<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <title data-title="photos.lukelov.es">Four peaks shadows</title> <meta name="description" content="luke's photo stream."> <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="https://photos.lukelov.es/feed.xml"> <meta property="og:title" content="Four peaks shadows"> <meta property="og:type" content="website"> <meta property="og:url" content="https://photos.lukelov.es//four-peaks-shadows/"> <meta property="og:image" content="https://photos.lukelov.es//photos/large/Four%20peaks%20shadows-686656.jpeg"> <meta property="og:site_name" content="photos.lukelov.es"> <meta property="og:description" content="luke's photo stream."> <meta name="thumbnail" content="https://photos.lukelov.es//photos/large/Four%20peaks%20shadows-686656.jpeg"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content=""> <meta name="twitter:title" content="Four peaks shadows"> <meta name="twitter:description" content="luke's photo stream."> <meta name="twitter:image" content="https://photos.lukelov.es//photos/large/Four%20peaks%20shadows-686656.jpeg"> <link rel="manifest" href="/manifest.json"> <link rel="shortcut icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="shortcut icon" type="image/png" href="/favicon.png" /> <link rel="apple-touch-icon" href="/touch-icon-iphone.png" /> <link rel="mask-icon" href="/favicon.svg" /> <script type="text/javascript" src="/js/lazy-loading.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="/css/master.css" /> </head> <body> <ul class="grid" id="target"> <li class="item target" id="four-peaks-shadows" style="background-image: url('/photos/tint/Four%20peaks%20shadows-65ba1d.jpeg')" title="Four peaks shadows"> <img class="lazyload" data-src="/photos/thumbnail/Four%20peaks%20shadows-3c1786.jpeg" src="/photos/tint/Four%20peaks%20shadows-65ba1d.jpeg" height="3024" width="4032" /> <span class="full"> <span style="background-image: url('/photos/large/Four%20peaks%20shadows-686656.jpeg')"></span> </span> <a class="open" href="/four-peaks-shadows" data-target="four-peaks-shadows">Open</a> <a class="close" href="/">Close</a>  </li> </ul> <ul class="links">  <li class="rss"><a rel="alternate" type="application/rss+xml" href="https://photos.lukelov.es/feed.xml" title="RSS Feed">RSS Feed</a></li>    <li class="link"><a rel="me" href="https://instagram.com/lukes.outside" title="@lukes.outside on Instagram">Instagram</a></li>  </ul> <script> const ESCAPE = 27; const RIGHT = 39; const LEFT = 37; const TARGET_CLASS = 'target'; const $body = document.body let scrollPosition = 0; const scroll = { lock() { scrollPosition = window.pageYOffset; $body.style.overflow = 'hidden'; $body.style.position = 'fixed'; $body.style.top = `-${scrollPosition}px`; $body.style.width = '100%'; }, unlock() { $body.style.removeProperty('overflow'); $body.style.removeProperty('position'); $body.style.removeProperty('top'); $body.style.removeProperty('width'); window.scrollTo(0, scrollPosition); } }; const clickNavigationButton = (buttonClass) => { const id = window.history.state && window.history.state.id; if (id) { const selector = `#${id} ${buttonClass}`; const button = document.querySelector(selector); button && button.click(); } } const openPhoto = (id, href) => { const photo = document.querySelector(`#${id}`); const title = photo.getAttribute('title'); removeTargetClass(); photo.classList.add(TARGET_CLASS); scroll.lock() document.title = title; if (href) { window.history.pushState({id: id}, '', href); } } const closePhoto = (href) => { const title = document.querySelector('head title').getAttribute('data-title'); removeTargetClass(); document.title = title; if (href) { window.history.pushState({}, '', href); } } const removeTargetClass = () => { let targets = document.querySelectorAll(`.${TARGET_CLASS}`); targets.forEach((target) => { target.classList.remove(TARGET_CLASS); }); scroll.unlock() } const handleClick = (selector, event, callback) => { if (event.target.matches(selector)) { callback(); event.preventDefault(); } } const handleKey = (keyCode, event, callback) => { if (event.keyCode === keyCode) { callback(); event.preventDefault(); } } window.onpopstate = function(event) { if (event.state && event.state.id) { const id = event.state.id; openPhoto(id, null); } else { closePhoto(null); } } document.addEventListener('keydown', (event) => { handleKey(ESCAPE, event, () => { clickNavigationButton('.close'); }); handleKey(RIGHT, event, () => { clickNavigationButton('.next'); }); handleKey(LEFT, event, () => { clickNavigationButton('.previous'); }); }); document.addEventListener('click', (event) => { handleClick('[data-target][href]', event, () => { const id = event.target.getAttribute('data-target'); const href = event.target.getAttribute('href'); openPhoto(id, href); }); handleClick('[href].close', event, () => { const href = event.target.getAttribute('href'); closePhoto(href); }); }); lazyload(); </script> <script src="/js/photos.js" data-photo-id="four-peaks-shadows" data-photo-url="/four-peaks-shadows" data-target-id="target"></script> </body> </html>

CINXE.COM