Image gallery not displaying & removing random element

1

I tried to use parts of a codepen.io I found, but when I use my images, it will not display. I am not the greatest at javascript, so I’m wondering if the error lies in that section. I believe there is a random element organizing the pictures, but I can’t tell where it is in the code. Also, sometimes my image do display and other times they will not. Please help!

code: https://codepen.io/daniel-albano/pen/ExaMZjm?editors=1000

2

Hello dan.

I am not sure why you would particularly even have this section:

gallery.querySelectorAll('img').forEach(function (item) {
    item.classList.add('byebye');
    if (item.complete) {
        console.log(item.src);
    }
    else {
        item.addEventListener('load', function () {
            var altura = getVal(gallery, 'grid-auto-rows');
            var gap = getVal(gallery, 'grid-row-gap');
            var gitem = item.parentElement.parentElement;
            gitem.style.gridRowEnd = "span " + Math.ceil((getHeight(gitem) + gap) / (altura + gap));
            item.classList.remove('byebye');
        });
    }
});

I would remove this, if I were you.

Hope that helps.

1 Like
3

I wasn’t too sure about what the javascript did because I haven’t got too far into the lessons for it, but I wanted the function that allowed for the image to be clicked on and resized. I wasn’t too sure if I removed parts if it would ruin that feature as well, but thank you for the solution! this is what I needed