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

55 Responses

  1. It works but when I hover the mouse on an image it doesn't look like its a hyper link, don't see the hand when I hover, thought?

    1. You might need to update your code... in a recent Elementor update, they changed the CSS class names. I updated the code provided here to make it work with that recent update.

    1. Bro. I faced same issue too. Then I found I have gallery link to custom URL and then I changed it to none. Now its working in mobile version too.

  6. This is awesome, thank you. I want to link these with affiliate links, thus I want them to open in a new window and have the "sponsored" tag. How do I add the following to each link?:

    target="_blank" rel="sponsored"

    1. to open in a new window, just read the end of the article... for the sponsored tag, it won't be possible with the way I coded this here...

  7. Dear guys, please help me, because on my webpage when I add the html code , elementor does not allow me to update the apge and give me "403 error", any suggestion?

    1. Hello Valentina! These 403 errors are frequently caused by security plugins. If you have WordFence, either disable it temporarily, or place it in learning mode. Thanks!

  8. This is amazing!! Had an issue with adding more lines, but all sorted now. One question... If I change the setting to order by "Random", will it still keep the links on the specific images?

  10. Hi, thanks so much for this. It works great but it prevents the caption and hover effects from working when this code in embedded. Any tips?

  11. Thanks for the code! I was wondering if I can put more than one gallery in the same page and link different pages for each photos gallery?

    1. Yes, this is possible! Just as in my example above... simply add a link for each image, in the order they show up on your page!

  14. Hi,
    Firslty thanks i have been looking for this for a long time.
    However i cant get it to work, i do exacly as it says, the "link" setting is at none, i copied exacly what you posted, and made sure the number of images matched the amount of links. Still no reaction from it at all, it does nothing.

    Can you help?

  16. Hi,
    This is exactly what I would need, Unfortunately I do not get it to run!
    I did exactly, what you says, but do not get to the links in the list but always to "http://svenjastenglneu.local/undefined" The site runs at al local server (Local by Flywheel)
    Can you help?
    Greetings

    2. As I can't see your website. it's difficult to say exactly what the problem is... but you can try changing both instances of '.e-gallery-item' , in the code, to '.gallery-item' . Let me know if this works!

    1. I'm trying to do this too, using elementor popup builder.
      I tried adding alert(filteredImages.length); after the queryselectorall and it's showing 0 in the alert.

    2. Shant Hagopian Im using elementor as well. Really would be hepful if I can get this working as elementor gallery doesnt allow more than 1 link

    3. Shant Hagopian To get this working in a popup, add all the code, in an HTML element that is IN the popup.

      Then, remove that line from the code :

      document.addEventListener('DOMContentLoaded', function () {

      and also remove this:

      });

      at the end of the Javascript part of the code. Then, it will work in a popup.

  18. Bonjour! I got this working but I'm still not getting the link status bar at the bottom on hover. I'm still happy to use your solution for now, but would be nice to figure out. This seems like basic functionality—certainly for webdesigners—so i don't understand why it's not included with the Elementor widget.

  20. sorry to bother.. I have used this trick for my website and it works fine.. but on mobile version all overlay on images are not showed until I click on single image..

    I'm wondering if there is any solution to let appear the overlay text on every image even without make the mouse hover..

    can you help me?
    Thank you

    1. This should work :

      @media (max-width:767px){
      .elementor-gallery-item__content * {
      opacity: 1!important;
      }

      .e-gallery-item .elementor-gallery-item__overlay {
      background-color: rgba(0,0,0,0.5);
      }
      }

  23. Love this! And very helpful in getting moving in the right direction. What I'd like to do is have each image in the gallery open a separate pop-up. The code for opening separate links for each image is pretty straightforward and I also saw the code for making the images open a pop-up, but it opens all the pop ups at the same time (I have six different images), instead of opening a different pop-up upon click for each image in the gallery. Is there a way to modify the code to accomplish this?

    1. Hey Lisa! Could you share with me your page URL where you are testing this? The code should be opening one popup at a time... I would need to check your page to see why it opens all of them!

      To be clear also, in your popup settings 'triggers' section, do you NOT have 'click' ? Because if you have 'click' there, this will happen!

      1. Actually, I figured it out. Here is the modified code I used to get it to work the way I wanted.

        .e-gallery-item{cursor: pointer;}

        document.addEventListener('DOMContentLoaded', function () {

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

        let popupposts = ['1596','953', '990', '1003', '1015', '1035', '1039', '1045', '1051'];

        var _loope = function _loope(i) {
        filteredImages[i].addEventListener('click', function () {
        elementorProFrontend.modules.popup.showPopup( { id: popupposts[i] } );
        });
        };

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

        });

  24. How can I utilize this if I have TWO galleries on one page. The first is only responsive on mobile, the second is only responsive on desktop. It's working for the second desktop version but not the first mobile gallery. Thoughts?

    1. First suggestions would be to try and avoid duplicating your gallery on mobile and desktop... It makes the page heavier, and usually it can be avoided, by instead having different settings for each viewport.

      If in your case you need two galleries, then it should be working fine still. If in total you have 18 images let's say (9 in the first, mobile and 9 in the desktop gallery), then you simply need 18 links...

      If it's still not working please share you page with me.

Leave a Reply