Create a custom gallery with Elementor

Recently for a client project, we had to create a tailor-made photo gallery, via Elementor, based on our client’s graphic model.

Here is the requested rendering opposite.
When you click on the images below, this will automatically change the large image, almost as if you were in a product sheet with WooCommerce for example.
Natively Elementor does not offer such rendering.

To do this, we have two widgets: Image Widget & for the small images below, the Gallery widget.

We then add in the advanced tab then css classes in the first widget: image-preview and in the second widget we will put the class: img-gallery

All you have to do is inject the code below into Elementor > CustomCode > Add:

				
					<script type="litespeed/javascript">document.addEventListener('DOMContentLiteSpeedLoaded',function(){const galleryItems=document.querySelectorAll('.e-gallery-item');const previewImage=document.querySelector('.image-preview img');galleryItems.forEach(item=>{item.addEventListener('click',function(){const imageUrl=item.querySelector('.e-gallery-image').style.backgroundImage.slice(5,-2);previewImage.src=imageUrl;previewImage.srcset=imageUrl})})})</script>
				
			
Want to leave a comment ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to see more code snippets?

Create a custom gallery with Elementor

With this code we gonna add a custom gallery to an elementor page

Display the total weight in the cart and order page of woocommerce

This code will allow you to know the weight of the order in the cart and order pages of woocommerce.

Custom CSS ID link to Elementor Nested Tabs

This script will allow us to run an URL directly to an Elementor tab

Create a dropdown from a Custom Post Type list

This code will allow us to display a drop-down menu which lists all the CPTs present in our ACF

Filter number of orders by country

Set up a submenu that allows us to filter a date range and display the number of orders depending on the country.

Filter Elementor Post Widgets by date of an ACF field

We will display the posts created with ACF and displayed with the Elementor Post widget using a date field entered via ACF
Let's talk ?

A question about WordPress?
A web project to be outsourced to a freelancer?
I am your man!