Added blogitem.js

1 files changed, 58 insertions, 0 deletions

diff --git a/assets/js/blogitem.js b/assets/js/blogitem.js
new file mode 100644
index 0000000..a827970
--- /dev/null
+++ b/assets/js/blogitem.js
@@ -0,0 +1,58 @@
+const body = {
+    content: document.getElementsByClassName('fullscreenImg')[0],
+    images: document.querySelectorAll('img:not([class])'),
+    buttons: `<div class='closeFullscreenImage'>&#10005;</div><div class='navleft'>&#171;</div><div class='navright'>&#187;</div>`
+}
+
+const blogImage = () => {
+    body.content.style.opacity = 0
+    body.images.forEach((img, index) => {
+        img.addEventListener('click', () => {
+            body.content.innerHTML = `${body.buttons}<img src='${img.src}'/>`
+            body.content.style.opacity = 1
+            listener(index)
+        })
+    })
+}
+
+const drawImage = (src) => {
+    try {
+        body.content.innerHTML = `${body.buttons}<img src='${src}'>`
+    } catch (err) {
+        //console.log(src)
+    }
+}
+
+const listener = (index) => {
+    const buttons = {
+        close: document.getElementsByClassName('closeFullscreenImage')[0],
+        left: document.getElementsByClassName('navleft')[0],
+        right: document.getElementsByClassName('navright')[0]
+    }
+    buttons.close.addEventListener('click', () => {
+        body.content.style.opacity = 0
+        setTimeout(() => {
+            body.content.innerHTML = ''
+        }, '1000')
+    })
+    buttons.left.addEventListener('click', () => {
+        if (index > 0) {
+            console.log(index)
+            drawImage(body.images[index - 1].src)
+            listener(index - 1)
+        } else {
+            drawImage(body.images[body.images.length - 1].src)
+            listener(body.images.length)
+        }
+    })
+    buttons.right.addEventListener('click', () => {
+        if (index < body.images.length - 1) {
+            drawImage(body.images[index + 1].src)
+            listener(index + 1)
+        } else {
+            drawImage(body.images[0].src)
+            listener(0)
+        }
+    })
+}
+blogImage()