Elementor Pro Gallery - Add Different Links to Each Image

No extra plug-ins required! Elementor Pro Required.

Here is how to easily add a different link to every image in the new Elementor Pro gallery element! These Elementor gallery links are not yet available directly from that element's settings.

Probably Elementor will add this functionality soon, but meanwhile here is a way to make this work.

Working examples:

tiger
Tigre
lynx
Lynx
beluga
Dophin
phonestickys
phoner
phonesticker
phone
phonesticky
stick
phonestick
great
shouldlookseetext
hello

 

Also works with multiple galleries:

All Features Images

To begin with, add an HTML element on the page with that Elementor Pro Gallery

It doesn't really matter where on the page the Element is added...

Elementor Close PopUp on Click for Menu & Same Page Links
left element

Then, add this code the html element, and edit the links to your own

The first link will be automatically linked with the first image in the gallery, and so on. Add a link for every image.

<style>.e-gallery-item{cursor: pointer;} </style>

<script>
document.addEventListener('DOMContentLoaded', function () {

var filteredImages = document.querySelectorAll('.e-gallery-item');

//Edit the links HERE
var links = [
'https://element.how/elementor-pop-ups-problems/',
'https://element.how/elementor-horizontal-scroll-section/',
'https://element.how/amazing-accordion-section/',
'https://element.how/awesome-hexagonal-boxes/',
'https://element.how/show-header-hamburger-click/',
'https://element.how/elementor-centered-logo-header/',
'https://element.how/scroll-down-new-add-cart-button/',
'https://element.how/elementor-ie-internet-explorer-fix/',
'https://element.how/awesome-hexagonal-boxes/',
'https://element.how/show-header-hamburger-click/',
'https://element.how/elementor-centered-logo-header/',
'https://element.how/scroll-down-new-add-cart-button/',
'https://element.how/elementor-ie-internet-explorer-fix/'
];

var _loope = function _loope(i) {
filteredImages[i].addEventListener('click', function () {
location = links[i];
});
};

for (var i = 0; i < filteredImages.length; i++) {
_loope(i);
}

});

</script>

Finally, enjoy your Elementor gallery links!

Important: the 'link' setting in the Elementor Pro Gallery needs to be set to 'none'!

New tab instead of same window: replace this line of code

location = links[i];

with this code

window.open(links[i]);

to open the links in a new tab instead of opening in the same window.

Extra: Want these Elementor Gallery Images to open a Popup ? Use this code instead.

Check this image to find your popup IDs.

<style>.e-gallery-item{cursor: pointer;} </style>
<script>
document.addEventListener('DOMContentLoaded', function () {

let filteredImages = document.querySelectorAll('.e-gallery-item');

let popupposts = ['15979','417','467','843','1400']; /* enter your popups IDs here , in the order you want them to show up */

filteredImages.forEach(function(e,i){
e.addEventListener( 'click', function(){
elementorProFrontend.modules.popup.showPopup( { id: popupposts[i] } );
} );
});
});
</script>

Et voila! Thanks for reading!
Let me know if you need help!

Tagged