How to Load Flickr Photo Albums into a CamBuildr Page with Lightbox Gallery
You can enrich your landing pages in CamBuildr with dynamic, filterable photo galleries using Flickr albums. With this setup, users can select from different albums, browse images in a responsive masonry layout, and view them in an interactive lightbox—including download and navigation features.
This guide shows you how to do this using Flickr’s API and a bit of custom HTML, CSS, and JavaScript.
What This Integration Does
Embeds a masonry-style photo wall with automatic layout adjustments for mobile and desktop.
Allows users to select from multiple albums via a dropdown menu.
Opens selected images in a full-screen lightbox with previous/next navigation and a download option.
Works only if users have accepted functional cookies, to comply with cookie consent settings (e.g. via CookieFirst).
1. Prepare Your Flickr Account
Get your Flickr API Key from Flickr API Keys.
Note your User ID (usually in the format 12345678@N00).
Create your Albums (Photosets) in Flickr and copy their IDs from the URL. Example:
Album ID: 72177720323471903
2. Add HTML and Structure to Your Page
Insert an HTML block into your CamBuildr landing page and paste the following code (replace album IDs and API credentials as needed):
<div id="fotowall" class="hidden">
<label for="albumSelect">Select Album</label>
<select id="albumSelect">
<option value="72177720323471903">National Campaign</option>
<option value="72177720323471808">Berlin Rally</option>
<option value="72177720323457622">Hamburg Rally</option>
<!-- Add more albums as needed -->
</select>
<div class="photo-wall" id="photoWall"></div>
</div>
<div id="placeholderwall">
<br><br><br><br><br>To view the photos, please
<a href="javascript:CookieFirst.openPanel()">accept</a>
functional cookies.
</div>
3. Add the Styling (CSS)
In the same block, include the following <style> tag above the HTML:
<style>
.hidden { display: none; }
select {
margin: 20px 0;
padding: 10px;
font-size: 16px;
}
.photo-wall {
column-count: 3;
column-gap: 10px;
max-width: 1200px;
margin: 20px auto;
padding: 10px;
}
.photo-item {
width: 100%;
margin-bottom: 10px;
display: inline-block;
}
.photo-item img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
cursor: pointer;
}
.lightbox {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 1000;
}
.lightbox img {
max-width: 90%;
max-height: 80%;
border-radius: 8px;
}
.lightbox .close-btn {
position: absolute;
top: 20px; right: 30px;
font-size: 30px;
color: white;
cursor: pointer;
}
.download-icon {
position: absolute;
top: 20px; left: 30px;
cursor: pointer;
}
.download-icon img {
width: 32px;
height: 32px;
}
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 40px;
color: white;
cursor: pointer;
background: rgba(0, 0, 0, 0.6);
padding: 10px 15px;
border-radius: 5px;
}
.arrow:hover {
background: rgba(255, 255, 255, 0.8);
color: black;
}
.left-arrow { left: 20px; }
.right-arrow { right: 20px; }
@media (max-width: 768px) {
.photo-wall {
column-count: 2;
}
}
</style>
4. Add JavaScript Logic for Flickr Integration
Below the HTML and CSS, add the JavaScript. Replace the API key and user ID with your own:
<script>
const apiKey = "YOUR_FLICKR_API_KEY";
const userId = "YOUR_FLICKR_USER_ID";
let currentImageIndex = 0;
let imageList = [];
function fetchPhotos(photosetId) {
const url = `https://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=${apiKey}&photoset_id=${photosetId}&user_id=${userId}&format=json&nojsoncallback=1`;
fetch(url)
.then(response => response.json())
.then(data => {
const photoWall = document.getElementById("photoWall");
photoWall.innerHTML = "";
imageList = [];
data.photoset.photo.forEach(photo => {
const imgSrc = `https://live.staticflickr.com/${photo.server}/${photo.id}_${photo.secret}_b.jpg`;
imageList.push(imgSrc);
const img = document.createElement("img");
img.src = imgSrc;
img.alt = photo.title;
img.onclick = function() {
openLightbox(imageList.indexOf(imgSrc));
};
const container = document.createElement("div");
container.classList.add("photo-item");
container.appendChild(img);
photoWall.appendChild(container);
});
})
.catch(error => console.error("Error fetching Flickr API:", error));
}
function openLightbox(index) {
currentImageIndex = index;
updateLightbox();
document.getElementById("lightbox").style.display = "flex";
}
function updateLightbox() {
document.getElementById("lightbox-img").src = imageList[currentImageIndex];
}
function closeLightbox() {
document.getElementById("lightbox").style.display = "none";
}
function downloadImage() {
fetch(imageList[currentImageIndex])
.then(response => response.blob())
.then(blob => {
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = "downloaded_image.jpg";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
}
function prevImage() {
currentImageIndex = (currentImageIndex - 1 + imageList.length) % imageList.length;
updateLightbox();
}
function nextImage() {
currentImageIndex = (currentImageIndex + 1) % imageList.length;
updateLightbox();
}
const albumSelect = document.getElementById("albumSelect");
albumSelect.addEventListener("change", (event) => {
checkFlickr(event.target.value);
});
function checkFlickr(value, consent = null) {
if (!consent) {
consent = CookieFirst?.consent;
}
if (consent?.functional === true) {
fetchPhotos(value);
document.getElementById("fotowall").classList.remove("hidden");
document.getElementById("placeholderwall").classList.add("hidden");
} else {
window.addEventListener("cf_consent", (event) => {
checkFlickr(albumSelect.value, event.detail);
});
}
}
window.addEventListener("cf_init", () => {
checkFlickr(albumSelect.value);
});
</script>
5. Save and Test
Preview the page.
Select an album from the dropdown menu.
Confirm that images load correctly, and that the lightbox works as expected.
If you see the placeholder instead of images, test your cookie consent settings.