Mango Masonry Gallery for Elementor

Description

Mango Masonry Gallery adds a clean, responsive masonry gallery to your site. Images keep their natural aspect ratio and flow into columns, and clicking an image opens it in a full-screen lightbox.

Features:

• Elementor widget with a live masonry preview in the editor
• Responsive columns (1–6) for desktop, tablet and mobile
• Adjustable gap, corner radius and image size
• Full-screen lightbox with previous/next buttons, keyboard navigation (←, →, Esc) and an image counter
• Custom hover overlay, lightbox accent and lightbox background colors
• Accessible: keyboard-focusable images, ARIA labels, focus is returned after closing the lightbox
• No jQuery and no external libraries; CSS and JS load only on pages that show a gallery
• Works without Elementor through the [mango_masonry_gallery] shortcode

Shortcode

[mango_masonry_gallery ids="12,34,56" columns="3"]

Available attributes:

• ids – comma-separated attachment IDs (required)
• columns – desktop columns, 1–6 (default 3)
• columns_tablet – tablet columns (default: 2, or fewer if columns is lower)
• columns_mobile – mobile columns (default 1)
• gap – space between images, e.g. 20px (default 7px)
• radius – image corner radius, e.g. 4px (default 2px)
• size – registered image size used in the grid (default large)
• overlay – hover overlay color (default rgba(20,20,20,0.45))
• accent – lightbox controls color (default #d4b5a5)
• lightbox_bg – lightbox background color (default rgba(10,7,5,0.96))