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.

<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) {
    if (links[i].length > 4) {
    filteredImages[i].style.cursor = "pointer";
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.

Want to skip an image?

If you want to skip an image, ie don’t have a link for it, simply enter no URL for it’s place in the list.

So let’s say you have 3 images, and you want to skip image 2. Your var links becomes:

var links = [
        'https://element.how/elementor-pop-ups-problems/',
        '',
        'https://element.how/amazing-accordion-section/',
];

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

133 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);
      }
      }

      1. This is happening to me, as well. Maxime, do you have any updates for this?

      2. Hey Sarah!

        I just updated the tutorial & code with a fix for this, and instructions to have this work!

  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?

  45. Hi Maxime! Thanks for this code. My idea is to use a multiple gallery with a three column grid and in one of the galleries there will only be one element. Is it possible to center that gallery (so that the image is in the center, not on the left)?
    Thanks a lot!!!

    1. This is not really possible. This element uses CSS Grid and there is no simple way to detect if there is only one item in the grid, and in that case and that case only, have different CSS applied.

      It's possible with JavaScript but this is beyond the scope of the current tutorial.

  46. Hello, thank you for sharing this code. For some reason all images take the first link only, so whenever I click on any of my gallery images it goes to the first link. What I'm doing wrong here?

    Thanks!

    1. I fixed it, I was using only my custom CSS class, I added the Elementor class with my custom class and it works perfectly. Thanks! 🙂

    1. Disable your translation before getting the code. Now your translated version of the page also translated parts of the code, so it doesn't work.

      1. Boa tarde Maxime, atualizei o código sem tradução, porem ainda não esta funcionando! vai me ajudar muuito esse script...fico no aguardo e obrigado!

      2. Funcionou agr cara, coloquei a quantidade maior de links e foi, porém só esta funcionando ate a segunda fileira apenas...depois não funciona, sabe me dizer como posso saber a ordem certa? tenho 4 filtros dentro da galeria para mostrar diferentes projetos. obrigado meu amigo

      3. You have 110 images... you need 110 urls, it's that simple!

  50. Hello , first of all thank you for the great tips.
    I have used the code for the popups on our site http://www.weltveganmagazin.de/kooperationspartner. It works so far also quite well, there is only the problem that after loading the page at the first click, wherever, it opens first the popup with the first ID in the code, even if I click only on the filter page. Can you help me? And sorry I am beginner and don't know about writing own scripts. Would appreciate your help, I'll paste the code I used sometime. Best regards, Sven

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

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

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

    let popupposts = ['766','773','777','944','951','768','948','954','960']; /* 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] } );
    } );
    });
    });

    1. Hey Welt!

      That's unrelated to my code. It's actually a common mistake by Elementor users. In the popups display triggers, you should NOT have "on click".

      Remove this, and that will go away.

      Cheers!

  52. Hi Maxime, if you should have a tip for a search filter for Elementor Pro Gallery, where the search is filtered by words in the media description of the images, and then presents me the images on the same page. it would be awesome. Of course this should not affect the popup function, but should of course apply to the images found. I got nowhere with my research, and unfortunately have no idea about programming. But maybe you have a tip for me. Best regards, Sven

      1. Hello Maxime, thank you for your feedback. Too bad, but it could have been that you have already encountered such a search fiter. Best regards, Sven

  53. Dear Maxime

    First of all thank you for your work.
    I am in the process of creating my site and I am totally new to html. I've read the previous answers but I don't feel like I have my solution:

    I have a problem when I click on my photo in the gallery. When I click, the photo opens in the lightbox for a few seconds before automatically redirecting me to the configured link. How do I disable this feature without disabling the "lightbox" option for my entire site?

    In addition, it also appears on my mobile phone and when I want to go to previous page, the site opens on the lightbox. Only on the phone I specify.

    Thanks in advance,

    Xabi

    1. Hey Xabi!

      Set the option "Link" to "none" in the gallery settings, and the lightbox should no longer show up.

      Let me know if that works!

      Maxime

  54. Hi Maxime,

    Thanks for the tips. But when I use the code, when I press UPDATE, it says 'Server Error (500 Internal Server Error). I delete the code (empty), the update is ok. Can you help me?

    Thanks

    1. Hery Azma!

      Are you adding this code as an Admin? Other users won't have enough permissions.

      Otherwise it might also be your security plugin... put it in learning mode while you add this code.

  55. Hi Maxime,
    i set this up a while ago for two images, and now adding a third one I realised the links no longer work 🙁
    https://acework.io/resources/ -> only the top three are on this gallery mode. i still need to change the others.
    just reentered the html code and updated the links, but so far, no luck. just nothing happens when i click on the images..
    thanks for your help!

    1. Hey !

      You just have a simple syntax error there... In the code, in your links, you need a comma ( , ) at the end of every line.

      Now you only have a comma after the first line, but not the other two lines. Add the commas and it will fix this.

      Cheers!

      1. wow, it still blows my mind how one simple comma can do that! you're a legend, Maxime - merci beaucoup!

  56. Thanks for this clear tutorial. However, I do have a problem:
    I pasted the code into the HTML element, but after clicking the update button, the tag is stripped away and only the code stays, which obviously doesn't work.
    What could be causing the script tag to be stripped?

    1. Hey Lea!

      This can happen if you aren't logged in as an admin.

      Another reason is if you have security plugins such as WordFence. Maybe you need to place it in learning mode for a while.

      1. Thanks for the pointers!
        It turns out that wp-config.php had the line:
        define( 'DISALLOW_UNFILTERED_HTML', true);
        and that's what caused it.

      2. Thank you very much for sharing! I wasn't aware of that issue.

  57. Hi Maxime,
    me again! This time I'm struggling with the second row on my page: https://acework.io/resources/
    It picks up the link, but only the last one that should be connected to the fourth image in the row. But it now connects to the first one, and the three others don't work.
    Commas are all there, and it looks the same like the first row.
    Any suggestions what could be wrong this time?
    Thanks!

    1. Hey!

      You need to have only one HTML element on your page, with only one instance of the code. Add all the links into only one var link = [].

      It will automatically link all the images that are within gallery elements on the page.

Leave a Reply