From bc5188fc21a825f4849139cd9888b0476fd34a99 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sun, 20 Feb 2022 13:09:15 +0200 Subject: Implemented click to zoom on images --- src/scripts/image-show.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 src/scripts/image-show.js (limited to 'src/scripts') diff --git a/src/scripts/image-show.js b/src/scripts/image-show.js new file mode 100644 index 0000000..1683107 --- /dev/null +++ b/src/scripts/image-show.js @@ -0,0 +1,24 @@ +let scrollPosition = 0; + +function clickToView() { + if (scrollPosition === 0) { + scrollPosition = window.scrollY; + window.scrollTo(0, 0); + } + + this.classList.toggle('clicked-image'); + document.body.classList.toggle('body-on-clicked-image'); + + if (this.className.length === 0) { + window.scrollTo(0, scrollPosition); + scrollPosition = 0; + } +} + +const images = document.getElementsByTagName('img'); + +for (const image of images) { + if (image.alt !== '🔗') { + image.onclick = clickToView; + } +} -- cgit v1.3.1-23-gd82d From a55f3f43af89aa7ff9093eb8583bf536e00d9e70 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sun, 20 Feb 2022 13:29:57 +0200 Subject: Fixed image show script when img has multiple classes --- src/scripts/image-show.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/scripts') diff --git a/src/scripts/image-show.js b/src/scripts/image-show.js index 1683107..b1ca7cf 100644 --- a/src/scripts/image-show.js +++ b/src/scripts/image-show.js @@ -9,7 +9,7 @@ function clickToView() { this.classList.toggle('clicked-image'); document.body.classList.toggle('body-on-clicked-image'); - if (this.className.length === 0) { + if (!this.classList.contains('clicked-image')) { window.scrollTo(0, scrollPosition); scrollPosition = 0; } -- cgit v1.3.1-23-gd82d