Chapter: Adding Zoom Lightbox Effect to Drupal Image Gallery
In the previous chapters we built the foundation of our Drupal image gallery.
We created a content type, configured an image field, created a view, and customized
the HTML structure using Twig templates.
The gallery already displays images in a responsive grid layout with hover animations.
However, modern websites usually allow users to click an image and view a larger
version of it. This functionality is called a Lightbox or
Zoom Viewer.
In this chapter we will implement a fullscreen image zoom effect using JavaScript
and integrate it properly with Drupal.
⭐ Understanding Lightbox Functionality
A lightbox works by opening an overlay layer on top of the page. When a user clicks
on an image, JavaScript creates a modal window containing the larger version of the image.
Typical behavior of a lightbox gallery:
- User clicks an image
- Page darkens with overlay
- Image appears in large size
- User clicks outside image to close
Gallery Grid
[Image] [Image] [Image]
Click Image
↓
Fullscreen Overlay
↓
Large Image Preview
⭐ Step 1: Create JavaScript File
Inside your theme create a JavaScript directory if it does not exist.
themes/custom/yourtheme/js
Create a file named:
script.js
Add the following JavaScript code:
(function (Drupal, once) {
Drupal.behaviors.galleryZoom = {
attach: function (context) {
once('galleryZoom', context.querySelectorAll('.gallery-image img')).forEach(function(el){
el.addEventListener("click", function(){
var src = this.src;
var overlay = document.createElement("div");
overlay.classList.add("lightbox");
overlay.innerHTML =
'×' +
'
';
document.body.appendChild(overlay);
overlay.addEventListener("click", function(){
overlay.remove();
});
});
});
}
};
})(Drupal, once);
This script listens for click events on gallery images and dynamically
creates a fullscreen overlay displaying the clicked image.
⭐ Step 2: Register Drupal Library
Drupal loads CSS and JavaScript files using the Libraries API.
Open your theme file:
yourtheme.libraries.yml
Add the following configuration:
global-styling:
css:
theme:
css/style.css: {}
js:
js/script.js: {}
dependencies:
- core/jquery
- core/once
This ensures that Drupal loads the gallery JavaScript and CSS on the frontend.
⭐ Step 3: Add Lightbox CSS
Now we create the styling for the zoom overlay.
Open your theme stylesheet:
themes/custom/yourtheme/css/style.css
Add the following CSS:
.lightbox{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
}
.lightbox-img{
max-width:90%;
max-height:90%;
border-radius:8px;
}
.lightbox-close{
position:absolute;
top:30px;
right:40px;
font-size:40px;
color:#fff;
cursor:pointer;
}
This CSS creates a dark fullscreen overlay with the image centered on the screen.
⭐ Step 4: Clear Drupal Cache
After adding new JavaScript or CSS files you must clear Drupal cache.
vendor\bin\drush.bat cr
Alternatively you can rebuild cache using:
http://localhost/drupal10/core/rebuild.php
⭐ Step 5: Test the Gallery
Now open the gallery page in your browser:
/gallery
Test the following interactions:
- Hover over images
- Observe zoom animation
- Click an image
- Verify fullscreen lightbox appears
- Click overlay to close viewer
If everything is working correctly your gallery is now fully functional.
⭐ Performance Optimization Tips
Large image galleries can affect page performance. Consider the following optimizations:
- Use optimized image styles
- Enable lazy loading
- Compress images before upload
- Use WebP image format
Drupal supports lazy loading automatically for images rendered through image fields.
⭐ SEO Best Practices for Image Galleries
To improve SEO ranking of gallery pages follow these guidelines:
- Use descriptive image titles
- Add alt text to images
- Optimize file sizes
- Use semantic HTML structure
Properly optimized images improve both search engine ranking and page load speed.
⭐ Final Gallery Architecture
Content Type
↓
Image Field
↓
Drupal View
↓
Twig Template
↓
CSS Grid Layout
↓
JavaScript Lightbox
This layered architecture allows Drupal developers to separate content,
presentation, and functionality.
📌 Final Summary
In this complete tutorial we built a fully functional Drupal image gallery
from scratch.
- Created a gallery content type
- Added image fields
- Built a Drupal View
- Customized output using Twig templates
- Implemented responsive CSS grid
- Added hover animations
- Integrated JavaScript zoom lightbox
This approach gives developers complete control over the frontend design
while still leveraging Drupal’s powerful content management system.
