Hi Everybody,
I’ve been working on an image gallery for a while and wanted to reference my existing Airtable source. This code creates a responsive masonry-style image gallery with hover effects. It’s displaying images in a visually appealing grid layout. On hover, each image reveals a description overlay. The gallery is suitable for various devices.
Happy for feedback and adjustments!
To use this code:
- Replace the Airtable configuration (token, base ID, and table name) with your own.
- Ensure your Airtable has columns for image URLs and descriptions.
- Customize the styling as needed to fit your website’s design.
<div id="mansionGallery"></div>
<div id="debugInfo" style="display:none;"></div>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
<script>
const AIRTABLE_TOKEN = 'YOUR_AIRTABLE_TOKEN';
const AIRTABLE_BASE_ID = 'YOUR_BASE_ID';
const AIRTABLE_TABLE_NAME = 'YOUR_TABLE_NAME';
function createGallery(images) {
const gallery = document.getElementById('mansionGallery');
images.forEach((image) => {
if (image.fields.ImageURL && image.fields.ImageURL[0] && image.fields.ImageURL[0].url) {
const imgContainer = document.createElement('div');
imgContainer.className = 'grid-item';
const img = document.createElement('img');
img.src = image.fields.ImageURL[0].url;
img.alt = image.fields.Description || 'Image';
const overlay = document.createElement('div');
overlay.className = 'overlay';
const description = document.createElement('p');
description.className = 'description';
description.textContent = image.fields.Description || '';
overlay.appendChild(description);
imgContainer.appendChild(img);
imgContainer.appendChild(overlay);
gallery.appendChild(imgContainer);
}
});
imagesLoaded(gallery, function() {
new Masonry(gallery, {
itemSelector: '.grid-item',
columnWidth: '.grid-item',
percentPosition: true
});
});
}
fetch(`https://api.airtable.com/v0/${AIRTABLE_BASE_ID}/${AIRTABLE_TABLE_NAME}`, {
headers: {
'Authorization': `Bearer ${AIRTABLE_TOKEN}`
}
})
.then(response => response.json())
.then(data => {
createGallery(data.records);
})
.catch(error => {
console.error('Error fetching records:', error);
});
</script>
<style>
#mansionGallery {
width: 100%;
}
.grid-item {
width: 33.333%;
padding: 5px;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.grid-item img {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.grid-item:hover .overlay {
opacity: 1;
}
.description {
color: white;
text-align: center;
padding: 10px;
font-size: 14px;
}
@media (max-width: 900px) {
.grid-item { width: 50%; }
}
@media (max-width: 600px) {
.grid-item { width: 100%; }
}
</style>
.