diff options
author | mattkae <mattkae@protonmail.com> | 2021-11-26 15:50:57 -0500 |
---|---|---|
committer | mattkae <mattkae@protonmail.com> | 2021-11-26 15:53:41 -0500 |
commit | ece64d0aa9bf0ef3aac570bf8ee0a5ab9ef752c8 (patch) | |
tree | 5d1f40a9135705772fd01d1c1939b40ad6177fde /index.js | |
parent | 0b1e54e61217f0774e51d3df8d73e0360b63a4ab (diff) |
(mkosarek) Expandable pictures
Diffstat (limited to 'index.js')
-rw-r--r-- | index.js | 29 |
1 files changed, 23 insertions, 6 deletions
@@ -48,16 +48,28 @@ function runCarousel() { } function onImageClicked() { - + var background = document.createElement('div'); + background.classList.add('carousel_image_expanded_container'); + var clone = this.cloneNode(true); + clone.classList.add('expanded'); + background.append(clone); + clone.addEventListener('click', function(event) { event.stopPropagation(); }); + background.addEventListener('click', function() { background.remove(); }); + document.body.parentElement.prepend(background); + } + + function setImageClicked() { + for (var i = 0; i < numImages; i++) { + var image = imageList[i]; + image.addEventListener('click', onImageClicked); + } } function updateCarousel() { - var children = imageContainer.children, - numChildren = imageContainer.children.length, - selectedChildPosition = -(carouselPosition * 240); + var selectedChildPosition = -(carouselPosition * 240); imageContainer.style.transform = 'translate(' + selectedChildPosition + 'px, 0)'; - for (var i = 0; i < children.length; i++) { - var image = children[i]; + for (var i = 0; i < numImages; i++) { + var image = imageList[i]; if (i !== carouselPosition) { if (i === (carouselPosition - 1) % numImages) { image.style.opacity = 0.3; @@ -75,6 +87,11 @@ function runCarousel() { leftButton.style.visibility = (carouselPosition === 0) ? 'hidden' : 'visible'; } + // -- Set up on image clicked + var imageList = imageContainer.children, + numImages = imageContainer.children.length; + + setImageClicked(); updateCarousel(); leftButton.addEventListener('click', onCarouselLeft); |