Thumbnail Gallery Elementor

Elementor tested up to: 3.15 Elementor Pro tested up to: 3.15

A production-ready Elementor add-on that creates a beautiful Room Gallery widget with main image slider and thumbnail navigation.

Description

Thumbnail Gallery Elementor is a powerful and lightweight Elementor widget that allows you to create stunning image galleries with a professional layout. Perfect for showcasing room photos, product galleries, portfolios, and any image collection that needs an elegant presentation.

Key Features:

• Responsive Design: Automatically adapts to different screen sizes - vertical thumbnails on desktop, horizontal strip on mobile
• Swiper Integration: Uses the latest Swiper v10 for smooth, touch-friendly navigation
• Lightbox Support: Optional lightbox functionality using GLightbox for full-screen image viewing
• Custom Navigation Icons: Upload your own SVG, PNG, or JPG icons for previous/next buttons
• Feature List: Add feature icons and descriptions below the thumbnail gallery
• Autoplay & Loop: Configurable autoplay with custom delay and loop options
• Accessibility Ready: Full keyboard navigation support with ARIA labels and focus management
• Performance Optimized: Lazy loading images, efficient asset loading, and minimal footprint
• Highly Customizable: Extensive styling options and CSS variables for easy theming

Layout:

• Left side: Large main image slider with floating circular navigation buttons
• Right side: Vertical thumbnail slider (desktop) / Horizontal strip (mobile)
• Optional features list below thumbnails
• Rounded corners and modern styling
• Background color and spacing customization

Perfect For:

• Real estate room galleries
• Hotel and accommodation showcases
• Product image galleries
• Portfolio presentations
• Before/after showcases
• Any professional image collection

Installation

1. Automatic Installation

   • Go to Plugins → Add New in your WordPress admin
   • Search for "Thumbnail Gallery Elementor"
   • Click Install and then Activate

2. Manual Installation

   • Download the plugin zip file
   • Go to Plugins → Add New → Upload Plugin
   • Choose the downloaded file and click Install Now
   • Activate the plugin

3. Requirements Check

   • Ensure Elementor (free version) is installed and activated
   • WordPress 6.0+ and PHP 7.4+ required
   • The plugin will show admin notices if requirements are not met

Usage

1. Adding the Widget

   • Edit any page/post with Elementor
   • Search for "Room Gallery" in the widget panel
   • Drag and drop the widget to your desired location

2. Configuring Images

   • Click "Add Images" in the Gallery section
   • Select multiple images from your Media Library
   • Images will automatically display in the gallery

3. Customizing Settings

   • Main Height: Set a fixed height in pixels (leave blank for auto)
   • Thumbnails per View: Control how many thumbnails show vertically on desktop
   • Loop: Enable/disable infinite loop navigation
   • Autoplay: Enable automatic slide progression with custom delay
   • Lightbox: Enable full-screen image viewing

4. Custom Navigation

   • Upload custom icons for Previous/Next buttons
   • Supports SVG, PNG, and JPG formats
   • Leave empty to use default chevron icons

5. Adding Features

   • Use the Features section to add descriptive elements
   • Upload feature icons and add labels/descriptions
   • Features appear below the thumbnail gallery

6. Styling Options

   • Customize background color, border radius, and spacing
   • Adjust navigation button size
   • All changes preview in real-time

Keyboard Navigation

• Tab: Focus on the gallery
• Left/Right Arrow Keys: Navigate between slides
• Enter/Space: Activate navigation buttons
• Home/End: Jump to first/last slide

Responsive Behavior

• Desktop (≥768px): Vertical thumbnail slider on the right side
• Tablet (768px-1024px): Reduced sidebar width, maintained vertical layout
• Mobile (<768px): Horizontal thumbnail strip below main image
• Small Mobile (<480px): Optimized button sizes and spacing

Styling Customization

The plugin uses CSS variables for easy customization:

.rge-gallery {
    --rge-height: auto;        /* Main image height */
    --rge-radius: 18px;        /* Border radius */
    --rge-bg: #f2ede7;         /* Background color */
    --rge-gap: 20px;           /* Gap between elements */
    --rge-btn-size: 42px;      /* Navigation button size */
}

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+
• iOS Safari 12+
• Chrome Android 60+

Performance

• Lazy Loading: Images load only when needed
• Efficient Asset Loading: Scripts/styles load only when widget is present
• Optimized for Core Web Vitals: Minimal impact on page speed
• CDN Resources: Swiper and GLightbox loaded from reliable CDNs

Troubleshooting

Images not displaying:

• Check that images exist in Media Library
• Verify image file formats (JPG, PNG, WebP supported)
• Ensure proper image permissions

Slider not working:

• Check browser console for JavaScript errors
• Verify Swiper library is loading correctly
• Clear any caching plugins

Lightbox not opening:

• Ensure Lightbox setting is enabled
• Check that GLightbox library loads properly
• Verify no JavaScript conflicts with other plugins

Frequently Asked Questions

Does this work with Elementor Free?

Yes! The plugin is fully compatible with Elementor Free. Elementor Pro is not required.

Can I use this with any WordPress theme?

Yes, the plugin is designed to work with any properly coded WordPress theme. All styles are namespaced to avoid conflicts.

How many images can I add to a gallery?

There's no hard limit, but for optimal performance, we recommend keeping galleries under 50 images. The plugin includes lazy loading to handle larger galleries efficiently.

Can I customize the styling?

Absolutely! The plugin uses CSS variables and provides extensive styling controls in the Elementor editor. Advanced users can add custom CSS for further customization.

Is it mobile-friendly?

Yes, the gallery is fully responsive and provides an optimized experience across all device sizes with automatic layout adjustments.

Does it work with page builders other than Elementor?

This plugin is specifically designed for Elementor. For other page builders, you would need a different solution.

Changelog

1.0.0

• Initial release
• Main image slider with Swiper integration
• Vertical/horizontal thumbnail navigation
• Lightbox functionality with GLightbox
• Custom navigation icons support
• Features list with icons and descriptions
• Full responsive design
• Keyboard navigation support
• Accessibility features (ARIA labels, focus management)
• Performance optimizations (lazy loading, efficient asset loading)
• Extensive customization options
• CSS variables for easy theming

Upgrade Notice

1.0.0

Initial release of Thumbnail Gallery Elementor. Install to add professional gallery functionality to your Elementor-powered websites.

Support

For support questions, feature requests, or bug reports, please visit our support forum or contact us through our website.

Note: This plugin requires Elementor to be installed and activated. Make sure you have Elementor 3.8+ and WordPress 6.0+ before installation.