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:

 

Also works with multiple galleries:

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>
'use strict';
document.addEventListener('DOMContentLoaded', function () {

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

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

//EDIT THE LINKS HERE
var links = [
'https://elementorcodes.com/elementor-pop-ups-problems/',
'https://elementorcodes.com/elementor-horizontal-scroll-section/',
'https://elementorcodes.com/amazing-accordion-section/',
'https://elementorcodes.com/awesome-hexagonal-boxes/',
'https://elementorcodes.com/show-header-hamburger-click/',
'https://elementorcodes.com/elementor-centered-logo-header/',
'https://elementorcodes.com/scroll-down-new-add-cart-button/',
'https://elementorcodes.com/elementor-ie-internet-explorer-fix/'
];
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'!

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

< News >

Get awesome new designs right in your inbox!

No spam, not more than one weekly email.

< Support me>

Support my work by buying Elementor Pro , or addons, through my links

< Recent Designs >

x

Free Templates!

Subscribe to my news letter to receive the FREE template of this animated corner gift!

present

Visit the Learning Center For More Designs !

Created by <Elementor Codes>

Leave a Reply

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