| Availability |
Odoo Online
Odoo.sh
On Premise
|
| Lines of code | 207 |
| Technical Name |
web_image_gallery |
| License | AGPL-3 |
| Website | https://www.aciatechnologies.com |
| Availability |
Odoo Online
Odoo.sh
On Premise
|
| Lines of code | 207 |
| Technical Name |
web_image_gallery |
| License | AGPL-3 |
| Website | https://www.aciatechnologies.com |
Web Image Gallery
Lightbox image gallery preview with prev/next navigation for Odoo 18
Key Highlights
- Beautiful lightbox overlay for image previews
- Prev / Next navigation across all images on the page
- Works with any Odoo model — no Python code required
- Simple integration via data-image-url attribute
- Pure OWL component — lightweight and fast
- Responsive design with backdrop blur effect
A generic, reusable image gallery lightbox for the Odoo backend.
Add data-image-url attributes to any image elements in your views
and call previewGalleryImage(element) to open a beautiful
fullscreen preview with previous/next navigation.
Works with any model — properties, products, fleet vehicles, and more.
Features
Fullscreen Lightbox
Elegant fullscreen overlay with backdrop blur. Images are displayed in a clean white card with rounded corners.
Prev / Next Navigation
Navigate between all images on the page with elegant circular navigation buttons that appear on hover.
Image Counter
Displays current position (e.g. "3 / 12") so users always know where they are in the gallery.
Model-Agnostic
No Python models, no controllers. Works with any Odoo model by simply using the data-image-url attribute.
Responsive Design
Adapts to any screen size. Uses 92vw on mobile and caps at 1100px on large screens for optimal viewing.
OWL Component
Built with Odoo's OWL framework. Can be imported and extended by other modules for custom gallery behavior.
How to Use
Install the Module
Install Web Image Gallery from the Apps menu. No configuration needed.
Add data-image-url
In your XML view, add data-image-url to each image element with the full image URL.
Add onclick Handler
Add onclick="previewGalleryImage(this)" to open the lightbox when clicked.
Example XML:
<div class="col-3"
t-foreach="record.image_ids" t-as="img"
data-image-url="/web/image/my.model.image/${img.id}/image"
onclick="previewGalleryImage(this)"
style="cursor:pointer">
<img t-att-src="'/web/image/my.model.image/' + img.id + '/image'"
style="width:100%; border-radius:8px"/>
</div>
Screenshots
Property Kanban — Browse records with image thumbnails at a glance
Record Form — Property details with dedicated Images tab
Images Tab — Gallery of clickable image cards with titles and visibility controls
Lightbox Preview — Fullscreen image viewer with counter badge and navigation arrows
Next Image — Navigate between images with prev/next buttons and live counter updates
Odoo Apps — Install the module from the Apps menu, no configuration required
Use Cases
Add image gallery previews to any Odoo module
Real Estate
Property photo galleries
E-commerce
Product image previews
Fleet
Vehicle photo galleries
Maintenance
Equipment inspection photos
HR
Employee document photos
Any Model
Works with any image field
Need Any Help?
If you have questions or need assistance with this module, please don't hesitate to reach out.
Email Us
Visit Us
www.aciatechnologies.com
Please log in to comment on this module