1 const pages = Array.from(document.querySelectorAll('img.image-item'));
4 function changePage(pageNum) {
5 const previous = pages[currentPage];
6 const current = pages[pageNum];
12 previous.classList.remove('current');
13 current.classList.add('current');
15 currentPage = pageNum;
17 const display = document.getElementById('dest');
18 display.style.backgroundImage = `url("${current.src}")`;
22 document.getElementById('page-num')
24 (pageNum + 1).toLocaleString(),
25 pages.length.toLocaleString()
26 ].join('\u200a/\u200a');
31 document.getElementById('list').onclick = event => {
32 if (pages.includes(event.target)) {
33 changePage(pages.indexOf(event.target));
37 document.getElementById('image-container').onclick = event => {
38 const width = document.getElementById('image-container').clientWidth;
39 const clickPos = event.clientX / width;
42 changePage(currentPage - 1);
44 changePage(currentPage + 1);
48 document.onkeypress = event => {
49 switch (event.key.toLowerCase()) {
55 changePage(currentPage - 1);
57 // Return to previous page
59 window.history.go(-1);
67 changePage(currentPage + 1);
69 }// remove arrow cause it won't work
72 document.onkeydown = event =>{
73 switch (event.keyCode) {
75 changePage(currentPage - 1);
80 changePage(currentPage + 1);