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

Watch the video from Imran, and/or read the instructions below!

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

if (links[i].length > 1){
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

98 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.

  25. As a corollary to my previous comment, I now need to have two galleries in different sections on the same page. Initially, I thought I'd just copy the html block to the second section and then change the pop-up shortcodes to correspond with the new ones for the second section.

    I saw Leah's question above and tried eliminating the second html block and just putting all the shortcodes in sequence in the first html block, but it appears that her question is more about having multiple galleries in the same section b/c when I do all the shortcodes in the first block, the images in the section section are unreactive.

    The reason I need to layout the page this way is because I need a new section heading to announce the second gallery. I even tried putting the second heading and gallery in the same section underneath the first gallery, but still to no avail. What am I missing?

    Is there a way I can edit the code in each html block to specify which gallery in which section it needs to source?

    1. Hey Lisa! It should work fine regardless of if the images are in separate galleries... If you could share your URL with me, I could have a look why it's not working!

      2. Everything seems fine... I think it might be your popup conditions that aren't setup properly? On page load there is a bunch of them, and after that on click (clicking anywhere), there are a bunch of popups as well...

        The condition only needs to be that they should show on that page. In that way, they are available to be triggered from the code. All the other triggers (such as 'on click') should be removed...

      3. Thank you for the helpful reply. It was in fact the pop-up settings and once I corrected that and turned off the pop up triggers, everything worked perfectly!

        Now, let me ask you this: Of the total 12 icons I have on the page, 11 of the 12 link to a pop-up, however, the very last one does not have a pop up. We would like it to link to the Resources page. Is there a way to incorporate into the code that one of the 12 icons links to a URL instead of a pop up?

      4. hey Lisa!

        Yes, this is possible, but it would require further coding... Beyond the intended scope of the current tutorial. You can message me for custom work !

  26. Hi Maxime, thank you for the awesome code, it's exactly what I need. I wanted to mention that the class name "e-gallery-item" was replaced with "gallery-item" in my Elementor pro (downloaded a few days ago). So it could be helpful to add that note, I struggled to figure that part out since your code seemed to work for everyone else 🙂

    But again, thanks! This is perfect.

    1. Hey Emi!

      gallery-item is for the basic gallery element, the instructions on the page here is for the Pro gallery element (and that one has 'e-gallery-item')

      Thank you for letting others know about this though!

  27. Hi, cool code. But one thing is, when an image inside the gallery has no link I understand putting no URL between ' and ' will skip that image, but it still opens a blank page.

    Any way to avoid that, meaning the image without link doesn't open an empty window?

    Thanks!

    1. Hey Eric!

      Change

      window.open(links[i]);

      to

      if (links[i].length > 1){
      window.open(links[i]);
      }

      That should work fine!

    1. No, not with what I have here. It would be possible with additional, tailored custom code for this. If you really need this, you now where to find me! (check the footer)

  30. Thank you Maxime for this code, it released the Gallery Widget from a great handicap.
    The numbering works well in Justified layout and in Grid Layout.
    In the masonry Layout, we need to follow the order of the editing mode.

    I Have another question please:
    It seems that a page block is automatically generated as an attachment page and can be accessed by "View attachment page" from inside the gallery and is displayed as a "Permalink" in Editor mode. This page can be accessed only from the Media.
    How to access this page from the Gallery?
    Thank You again!

    1. I don't know! A way would be to get the links to these, and them manually link the images with these pages using the code in this tutorial...

      I don't know if there is an automated way. Maybe, maybe not, however this isn't a common enough feature request for me to invest efforts in finding out.

  31. Hey 🙂 You're tip is awesome ! I Have a little problem. When I reduce the page to a phone size to see the responsive changes, it works perfectly on pc, but when I am on a real phone. i'm Have same number of columns than pc. So It's a bit strange :/ Do you have an advice ?

    1. Hey Fabien!

      That bug is a bit too complex for me to have any idea, even more so without even seeing the page...

      In any case, I'm not working for Elementor! These kind of bugs are better reported to their support. Cheers!

      1. Hey 🙂
        Thanks for your answer 🙂 I understand, do you know how can I do If I have 2 gallery widget in one page? Is there a way to do it like you did with the slider ?

      2. Simply add a link for every image!

        Let's say you have two galleries, first one has 8 images, the other 10.

        You add 18 links, and it will work as you would expect. Link 9 will be image 1 of gallery 2.

  32. Hello!

    Thanks for your work! This is working great. I have a question: Is possible to add something that allows to open a new tab when I right click on the image?

    Thanks!

    1. Hey Krystel!

      No, this isn't possible... Not in this particular case here. In the tutorial I mention how you can have every link open in a new tab, or in the same tab, but there is no right click menu possible.

  33. This almost works for me. However with the " ‘link’ setting in the Elementor Pro Gallery needs set to ‘none’" all of my other tabbed images cannot be shown in the lightbox/popup.

    The media image file contains a caption. Can that be targeted to insert a link?
    I tried to set in a link in the caption in the media library image with link . Elementor does not recognize it as a link. But if it did... Is that possible?

  34. Hey !

    I really like this way of adding link for each image but i'm thinking about a close but different way to do it. I'm trying to modify the base code to automaticaly create the link of each image using an fixed url base + a dynamic part usign the "alt" attribute of each image.

    It could be something like this but it's not working (i'm sure i made some mistakes, i spent 3-4 years without coding so i missed a lot of things...)

    var _loope = function _loope(i) {
    filteredImages[i].addEventListener('click', function () {
    location ="https://www.mywebsiteurl.com/blablabla/" + filteredImages[i].getAttribute("alt");
    });
    };

    Do you think it could work ? I don't know how to get the attribute value from filteredImages[i] or if it's even possible

    Have a nice day !

    1. Hey Quentin!

      Yes that would work just fine, however it has the obvious inconvenient of taking up the alt tag.

      There is even a way to do it using the title or caption field instead, but then these fields are used... I went with a way that works fine, and for most use case it works well enough and is probably the better solution.

      For some use case, something more dynamic and flexible like using the alt tag would be better indeed, but I didn't want to code and explain many different ways in this tutorial... Whenever possible I try to keep it simple!

  35. In fact it was really simple, i just made some mistakes with a selector. If anyone wants the code variation, here it is :

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

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

    var _loope = function _loope(i) {
    filteredImages[i].addEventListener('click', function () {
    location = "https://www.yourwebsite.com/produit/" + filteredImages[i].querySelector(".e-gallery-image").getAttribute("yourattribute");
    });
    };

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

    });

    The url before "filteredImages[i].querySelector" is not mandatory, in my case i use that just to shorten the text used in the alt field. You can also get any any attribute you want for the link generation.

    Have a nice day !

  36. Dear Maxime,

    I am just starting to make a website. I am totally not known with html codes.
    However I tried to use the code for custom linked gallery.
    I really tried everything, when I copy your code it works....but if I use my links totally not.
    What do I do wrong???
    .e-gallery-item{cursor: pointer;}

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

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

    //Edit the links HERE
    var links = [
    'https://nouwensbogaers.nl/tegels-move/',
    'https://nouwensbogaers.nl/tegels-belmont/',
    'https://nouwensbogaers.nl/planks-jive/',
    'https://nouwensbogaers.nl/tegels-contour/',
    'https://nouwensbogaers.nl/tegels-inspire/',
    'https://nouwensbogaers.nl/tegels-accent-2/',
    'https://nouwensbogaers.nl/planks-move/'
    ];

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

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

    });

    Thanks for your help
    Ans from the Netherlands

      2. So it's because you already have a gallery above... you will need to add a class name 'gallery-with-links' to the gallery you want to target, and then in the code, change this line

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

        to that

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

        Cheers!

  37. I was hoping to create multiple galleries but it doesn't look like this could work. (ex: All, Cars, Trucks, Planes).
    Unfortunately, each time I click on the gallery the link is still attached to whichever the first image was under 'all'. Darn. I was really excited to find a work around

    1. Would you have the URL where you are testing this? The code should be working fine in the scenario you are describing. As you can see with my example above...

  40. I'd love to give this a shot but I have a gallery with Tabs. Does that mean I have to count the images in the first tab to get to the second tab image and include blank spaces ' ' for all the other tabs.
    And, will this stop the other gallery items from their normal pop-up state?

    1. Does that mean I have to count the images in the first tab to get to the second tab image and include blank spaces ' ' for all the other tabs.

      Yes, precisely!

      And, will this stop the other gallery items from their normal pop-up state?

      Indeed, it will stop that.

  43. Hello! This is a truly awesome "code-help". Thank you very much for it! I have only one issue: The first 4 pictures of my gallery are linked in the right way, but the rest of the pictures only lead to my own site with an error. How can it be, that it works for 4 pictures, but not for the rest?! I have it all set up like you described it. Thank you in advance, happy greetings, Mathias

  44. Hi, I tried but the popup code doesn't work 🙁
    Here is my site https://www.drinktonightrecords.fi/#Releases
    And this is the code I put:

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

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

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

    let popupposts = ['3297','3290','3173','3153','3075']; /* 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] } );
    } );
    });
    });

    Where is the problem?

Leave a Reply