Image Gallery with JavaScript & CSS code

[l3oy8231]

Step 1 : Create Multiple Image Column

Step 2 : Create Joined List Column

Step 3 : Create JavaScript Column

let urls = p1.split(',');
let pname = p2;
let columns = [[], [], [], [], []];

urls.forEach((url, index) => {
    let columnIndex = index % 5;
    columns[columnIndex].push(url);
});

let galleryHTML = '<div class="gallery">';
columns.forEach((column) => {
    galleryHTML += '<div class="gallery__column">';
    column.forEach((url, index) => {
        galleryHTML += `<a href="${url}" target="_blank" class="gallery__link">
                <figure class="gallery__thumb">
                    <img src="${url}" alt="Image ${index + 1}" class="gallery__image">
                    <figcaption class="gallery__caption">${pname}</figcaption>
                </figure>
            </a>`;
    });
    galleryHTML += '</div>';
});
galleryHTML += '</div>';

return galleryHTML;

Step 4 : Create Template Column (Fix Code)

<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400&display=swap" rel="stylesheet">
{#}

Step 5 : Displayed with Rich Text Component

Step 6 : Custom CSS

.gallery {
	display: flex;
	padding: 2px;
	transition: .3s;
	
	&:hover &__image {
		filter: grayscale(1);
	}
	
	&__column {
		display: flex;
		flex-direction: column;
		width: 25%;
	}
	
	&__link {
		margin: 2px;
		overflow: hidden;
		
		&:hover {
			.gallery__image {
				filter: grayscale(0);
			}
			
			.gallery__caption {
				opacity: 1;
			}
		}
	}
	
	&__thumb {
		position: relative;
	}
	
	&__image {
		display: block;
		width: 100%;
		transition: .3s;
		
		&:hover {
			transform: scale(1.1);
		}
	}
	
	&__caption {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 25px 15px 15px;
		width: 100%;
		font-family: 'Raleway', sans-serif;
		font-size: 14px;
		color: white;
		opacity: 0;
		background: linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(255, 255 ,255 , 0) 100%);
		transition: .3s;
	}

Hope it’s useful. Make it a good day