Image Gallery with JavaScript & CSS code

Community Resources
1

ezgif.com-resize

1701764650411
1701764650411829×90 44.2 KB

Step 1 : Create Multiple Image Column

Step 2 : Create Joined List Column
1701764843987

Step 3 : Create JavaScript Column

1111111111111111111111111
1111111111111111111111111418×1054 54.1 KB

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)

1701765017550
1701765017550429×528 45.7 KB

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

Step 5 : Displayed with Rich Text Component
1701765143276

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 :pray: :pray: :pray:

14 Likes
2

:nerd_face: I loved this, thanks a lot for sharing it, such a creative and smooth solution!

I was trying it out and wanted the number of columns to be dynamic depending on how many images are in the gallery. So I added a small tweak to your JavaScript to make that happen.

Sharing it here in case anyone finds it useful too:

// Determine number of columns based on image count
let numColumns;
if (imageCount <= 3) {
    numColumns = imageCount;
} else if (imageCount === 4) {
    numColumns = 4;
} else if (imageCount === 5) {
    numColumns = 5;
} else if (imageCount === 6) {
    numColumns = 3;
} else if (imageCount >= 7) {
    numColumns = 4;
}

// Create columns array
let columns = [];
for (let i = 0; i < numColumns; i++) {
    columns.push([]);
}

:sparkles: This sets it to max 5 columns, but can be adjusted.

Thanks again for the inspiration!

2 Likes