#Image Lightbox Problem

8 messages · Page 1 of 1 (latest)

trail badger
#

Hello guys, I'm using a combination of Storyblok and Astro, and I'm having a weird problem, i have a grid of images where when you click on the image, it opens a modal with the expanded image, on localhost everything works perfectly, click, the modal opens with the expanded image, and I can click anywhere to close it, but when I build the project on Cloudflare pages, and I click in an image nothing happens, the modal only opens in localhost.

# 
---
import { storyblokEditable } from '@storyblok/astro'
import { Image } from 'astro:assets';

const { blok } = Astro.props
---

<script>
  let images = document.querySelectorAll('.grid img');

  images.forEach((img: HTMLImageElement)=> {
    img.addEventListener('click', () => {
      showModal(img.src);
    })
  })

  let modal = document.getElementById("modal");
  let modalImg = document.getElementById("modal-img") as HTMLImageElement;

  function showModal(src) {
            modal.classList.remove('hidden');
            modalImg.src = src;
  }

  function closeModal() {
            modal.classList.add('hidden');
  }

  document.querySelector('#modal').addEventListener('click', closeModal);
</script>

<div {...storyblokEditable(blok)} class="py-20 px-12">
  {blok.title && 
    <div class="text-center text-2xl font-bold uppercase mb-20">
        <h2 >{blok.title}</h2>
    </div>
  }
  <div
    class='grid gap-8 lg:grid-cols-9'
  >
    {
      blok.images && blok.images.map((image) => {
      return <figure class="cursor-pointer"><Image src={image.filename} alt={image.alt} height="500" width="500" class="" /></figure>
    })
    }
    </div>
    <div id="modal" class="hidden fixed top-0 left-0 z-50 w-screen h-screen bg-black/70 flex justify-center items-center">
      <a href="javascript:void(0)" class="invisible lg:visible fixed z-90 top-6 right-8 text-white text-2xl lg:text-5xl font-bold">x</a>
      <figure class=""><img id="modal-img" height="500" width="500" class="" /></figure>
    </div>
</div>
prime parrot
trail badger
#

@prime parrot thank you

prime parrot
trail badger
#

@prime parrot Unfortunately the problem persist, everything works perfectly in localhost, but when i build it on cloudflare pages doesn't work, and i don't know why, I don't get any errors, both when building and afterwards when I try to click to open the modal or when the page loads, it just doesn't work

prime parrot
#

Have you search here for cloudflare to see if similar issues have come up?