index_trailer.part

    </ul>
    <script>
      const ESCAPE = 27;
      const RIGHT = 39;
      const LEFT = 37;
      const TARGET_CLASS = 'target';
      
      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.getElementById(id);
        const title = photo.getAttribute('title');
        removeTargetClass();
        photo.classList.add(TARGET_CLASS);
        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);
        });
      }
      
      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>
  
</body></html>