https://devolotics.github.io/scripts/script_outreach.js

1// Function to fetch and display images with lazy loading
2function outreachPhotos_display(folder, imagesNum, elementId) {
3    const path = `https://res.cloudinary.com/dfcuj6dei/image/upload/v1708278573/Outreach/${folder}/`;
4    const imageContainer = document.getElementById(elementId);
5    const lightboxContainer = document.getElementById("lightboxContainer");
6    const lightboxImg = document.getElementById("lightboxImg");
7
8    for (let i = imagesNum; i > 0; i--) {
9        const imgContainer = document.createElement("div");
10        imgContainer.className = "photos_item";
11
12        const img = document.createElement("img");
13        img.dataset.src = `${path}${i}.jpg`;
14        img.className = "lazy"; // Add a class for styling if needed
15        img.src = "/assets/icons/loading.gif";
16
17        img.addEventListener("click", () => {
18            lightboxContainer.style.display = "flex";
19            lightboxImg.src = img.src;
20        });
21
22        imgContainer.appendChild(img);
23        imageContainer.appendChild(imgContainer);
24    }
25
26    // Initialize the Intersection Observer for lazy loading
27    const lazyImages = document.querySelectorAll(".lazy");
28
29    const observer = new IntersectionObserver((entries, observer) => {
30        entries.forEach((entry) => {
31            if (entry.isIntersecting) {
32                const img = entry.target;
33                img.src = img.dataset.src; // Load the image
34                img.classList.remove("lazy"); // Remove the lazy class
35                observer.unobserve(img); // Unobserve the image
36            }
37        });
38    });
39
40    lazyImages.forEach((image) => {
41        observer.observe(image);
42    });
43
44    lightboxContainer.addEventListener("click", () => {
45        lightboxContainer.style.display = "none";
46    });
47}
48
49// Usage: Call the function with the path to the folder containing image URLs
50outreachPhotos_display("International%20workshops", 5, "world_imgc");
51outreachPhotos_display("Summer%20Bot%20Camps", 10, "sbc_imgc");
52outreachPhotos_display("Toronto%20Public%20Library", 11, "tpl_imgc");
53outreachPhotos_display("School%20Workshops", 7, "schools_imgc");
54outreachPhotos_display("Community%20Centers", 10, "crc_imgc");