# Image Gallery with JavaScript & CSS code

**URL:** <https://community.glideapps.com/t/image-gallery-with-javascript-css-code/68373>\
**Category:** Community Resources\
**Created:** [December 5, 2023, 8:34am UTC](https://community.glideapps.com/t/image-gallery-with-javascript-css-code/68373 "2023-12-05T08:34:17Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![l3oy8231](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l3oy8231/32/32303_2.png) [@l3oy8231](https://community.glideapps.com/u/l3oy8231)\
**Post date:** [December 5, 2023, 8:34am UTC](https://community.glideapps.com/t/image-gallery-with-javascript-css-code/68373/1 "2023-12-05T08:34:17Z")

</div>

![ezgif.com-resize](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/c/1c81b20dfdae8c90fce5d9fd51c808c76516781e.gif)

 ![1701764650411](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/4/f45bdd59cff8a8b13b4c1db4e0c2c10a071782de.jpeg)

Step 1 : Create Multiple Image Column

Step 2 : Create Joined List Column  
 ![1701764843987](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/4/34de643e619dededc540032cdb0b190e8c87c808.jpeg)

Step 3 : Create JavaScript Column

 ![1111111111111111111111111](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/3/235e41b3736a99eb4d2deca2326c618b6b549abd.jpeg)

```auto
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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/4/847ae9d848531ea5723e7a508a0e18c03e2f2dc2.jpeg)

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

```

Step 5 : Displayed with Rich Text Component  
 ![1701765143276](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/d/1d256e012bd4125ee8cba0b49457c53ed66053cd.jpeg)

Step 6 : Custom CSS

```auto
.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 🙏 🙏 🙏

---

<div class="post-metadata">

**Author:** ![aurora](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aurora/32/90066_2.png) [@aurora](https://community.glideapps.com/u/aurora)\
**Post date:** [July 7, 2025, 5:52pm UTC](https://community.glideapps.com/t/image-gallery-with-javascript-css-code/68373/2 "2025-07-07T17:52:29Z")

</div>

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

```auto
// 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([]);
}

```

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

Thanks again for the inspiration!