[Pro] Elementor Gallery Links - Unique Link for Each Image
Get Premium

Elementor Pro Gallery - Add Different Links to Each Image

No extra plug-ins required! Elementor Pro Required.

Updated 26 June 2023

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, set your Elementor Pro gallery "link" setting to "custom"

Important: videos watchers, these instructions aren’t in Imran’s video!

This will create the proper HTML markup that we need for the code to work. It will wrap each image in a <a> element.

Find the Link setting, and set it to Custom URL. Then in the URL bar, enter “#”.

[Pro] Elementor Gallery Links - Unique Link for Each Image 1

Now, 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> 
/* Please login to get the code 
 * The code will be for the [Pro] Elementor Gallery Links - Unique Link for Each Image tutorial 
 * Found at this URL https://element.how/elementor-gallery-links-pro/ 
 */ 
</script>

Opening links in a new window (or new tab) [optional]

To open the links in a new tab instead of opening in the same window, add this code

<script> 
/* Please login to get the code 
 * The code will be for the [Pro] Elementor Gallery Links - Unique Link for Each Image tutorial 
 * Found at this URL https://element.how/elementor-gallery-links-pro/ 
 */ 
</script>

directly below this line of code

linkedImage.href = links[i];

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 links variable becomes:

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

You will need to add the class name popupGallery to your Gallery Pro element, under Advanced > CSS classes.

[Pro] Elementor Gallery Links - Unique Link for Each Image

Check this image to find your popup IDs.

Add this code in your HTML element:

<script> 
/* Please login to get the code 
 * The code will be for the [Pro] Elementor Gallery Links - Unique Link for Each Image tutorial 
 * Found at this URL https://element.how/elementor-gallery-links-pro/ 
 */ 
</script>

Finally, enjoy your Elementor gallery links!

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

Tagged

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

    2. It is written above:
      let links = [
      'https://element.how/elementor-pop-ups-problems/',
      '',
      'https://element.how/amazing-accordion-section/',
      ];

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

  6. 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!

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

  9. 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?

  10. 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!

  13. 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?

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

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

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

  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!

      3. Hey Maxime, I still have this problem, that images I don't need linked, by clicking on them still refreshes the page. Do you have a solution for this? Would be happy to hear from you. Thank you very much!

  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.

  59. Hi, thanks for this code - it's exactly what I am looking for! I want to use the pop-up version, but unfortunately it only works with one pop-up ID (the latest pup-up I edited). Other pop-up IDs do not work. Any idea what I might have done wrong? Thanks 🙂

    1. Hey !

      You are missing single quotes in your array of links! Here is what you have:

      //Edit the links HERE
var links = [
'https://marketing.acework.io/whitepaper-salary-benchmarks-tech-2022',
'https://marketing.acework.io/whitepaper-compensation-strategy-remote-company',
'https://marketing.acework.io/whitepaper-remote-benefits-strategy',
'https://marketing.acework.io/whitepaper-how-to-convince-ceo-remote-work',
'https://marketing.acework.io/whitepaper-hire-remotely-advice-recruiter',
'https://marketing.acework.io/guide-remote-job-description',
'https://marketing.acework.io/case-study-optimise-your-talent-pipeline',
https://marketing.acework.io/whitepaper-ceo-guide-remote-work,
https://marketing.acework.io/team-lead-remote-work,
https://marketing.acework.io/motivate-remote-teams,
https://marketing.acework.io/remote-work-audit
];

      Here is what it should be :

      //Edit the links HERE
var links = [
'https://marketing.acework.io/whitepaper-salary-benchmarks-tech-2022',
'https://marketing.acework.io/whitepaper-compensation-strategy-remote-company',
'https://marketing.acework.io/whitepaper-remote-benefits-strategy',
'https://marketing.acework.io/whitepaper-how-to-convince-ceo-remote-work',
'https://marketing.acework.io/whitepaper-hire-remotely-advice-recruiter',
'https://marketing.acework.io/guide-remote-job-description',
'https://marketing.acework.io/case-study-optimise-your-talent-pipeline',
'https://marketing.acework.io/whitepaper-ceo-guide-remote-work',
'https://marketing.acework.io/team-lead-remote-work',
'https://marketing.acework.io/motivate-remote-teams',
'https://marketing.acework.io/remote-work-audit',
];

  64. Hi !
    Sorry for my aproximate English.

    I used this code on one of my galleries, everything works fine. But I just realized that the code is applied to my other galleries. Do you have any idea how to fix this?
    On the first gallery I did link on any to make it work. The second one I put media link.

    Thanks.

  65. Hi there! Is there a simple way of having links open either on the same window or in a new tab case-by-case? For example, I use "WP External Links" which opens external links into new tabs, but internal links in the same window. However, although the option "overwrite existing rules" is set, it doesn't work with this code: it opens one way or another only.

  67. Hey Mike!

    This line you have here isn't quite right:

    location = window.open(links[i]);

    Change to just

    window.open(links[i]);

    Cheers!

    1. Oh, I notice that I have two galleries on this page. Does this code work for both at the same time? in what order do I have to put the links? line 1 left to right, then line two left to right?
      best
      b

    2. Hey Bahoe!

      Change this line:

      for (var i = 0; i < filteredImages.length; i++) { With for (var i = 0; i < links.length; i++) {

  70. I think I got it. first the left gallery is addressed (1st line, then 2nd line) and then the right gallery (also 1st line, 2nd line).
    It works now.
    Many Thanks
    it's good to talk to someone, then sometimes you come up with a solution
    best
    b

  71. Hi Maxime, just wanted to say thank you! This has been a life saver in designing our website, we would have been completely stuck without the article and your helpful follow ups on this thread! THANK YOU! 🙂

  75. Hi Maxime!

    Unfortunately the popup code doesn't work for me and I don't know why.
    This is on my site : http://www.agencedesmagiciens/photos

    This is the code I used :

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

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

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

    let popupposts = ['15979','417','467','843','1400']; /* [elementor-template id="13238"] */

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

    Can you help me ?
    Thanks

  76. 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?

  77. Sadly I am on the same spot as Seb,

    Thank you so much for your help Max, i can't get it to work either on my end and I made sure to have the correct links and to have the link setting is also in none. Please help!! thank you!!!

  78. Hey guys, here an alternative way to do it and get the same results.

    https://ibb.co/jJ9nhp3 (First one is with an image gallery)
    https://ibb.co/gTG5pXZ (Second one first step is to select the appropriate structure to get something similar to the gallery which you'll see highlighted. After that just add the image box and the rest is the same, but the difference is that now you can add a custom url.)

    Hope I helped

    1. Sorry Hussam but I don't really know what you are sharing here. Your first screenshots shows nothing at all of value or that could be any kind of instructions. It's a random screenshot of a few images.

      Your other screenshot, you seem to be saying that if you use individual images instead of the gallery element, you can add links to each image. All well and good, however then you don't have the filtering, the shared lightbox, the layout...

      1. Hey Maxime, I guess I didn’t really put effort into explaining it throughly. I’ll create a short guide as soon as I’m able. Also, this is just intended for those that want the image gallery effect as in my case I wasn’t interest in anything else. So it’s not a complete fix, but it’s better than nothing and maybe there are a few people out there which will satisfy their needs as it didn’t for me.

  79. Hi!

    Thank you very much for the code, it worked perfect. For those of you struggling with carrousels and popups, this updated code was the one that did the trick, changing the element from .e-gallery-item to .swiper-slide:

    .swiper-slide{cursor: pointer;}

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

    let filteredImages = document.querySelectorAll('.swiper-slide');

    let popupposts = ['2934','2950','2960','2936','2951','2962','2937','2952','2963','2939','2953']; /* 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] } );
    } );
    });
    });

  80. Thanks! It worked! However when I set the Gallery titles for 3 galleries - All/ Videos/Photos - which served as tabs, how do I adjust the font size of the title(especially when it is for mobile)?
    I couldnt put html classes in the titles fields to adjust the CSS, because then the provided code in the HTML widget would then not work.
    Under Content, only the captions' typography size could be adjusted and not the titles.
    Hope you could help me here!

    1. Hey!

      Are you commenting on the right post? This tutorial is about making a link for each image in the Gallery Pro... your comment seems to be about something else...

      1. Hey! Yes - I'm commenting on this post. I managed to create the multiple galleries with photos that are individually linked to different sites with your code.

        What I want to know is - in your example, above your multiple photo gallery there are three titles "All Features Images". How can I adjust the font size for the gallery titles? I'll like to adjust it for mobile size. Thanks!

      2. I believe you can adjust the styles for these from within the Elementor UI

  82. Hello,
    I have 2 galleries on my page. There are identical but differently layed out. The 1st one appear at the top of my header the second appeared when we scroll down and have a sticky header. The links don't work for my second gallery. Sorry but I'm not acquainted with JS but is it possible to add a condition like for each in your code ?
    Thanks and best regards.

    1. Greetings Muriel,

      My code should already work for multiple Gallery Pro element on the same page... However if you have a gallery inside of a sticky section (or container), that might interfere and cause problem, because Elementor duplicates the markup for sticky sections and containers.

      Could you share your URL with me?

    1. Hey Mediafy!

      Everything looks good in your code, except for the closing quotes for your link list.

      For some reason, many of them are curly quotes ( this character: ’ )
      They ALL need to be straight quotes ( ' ) otherwise, javascript syntax isn't respected and the code bugs.

      I made them larger here to easily see the difference.

      Cheers!

      1. Odd how that happened! But that fixed it perfectly. 🙂
        Thank you so much for your help and wonderful code!

  85. Thanks for your help with this, issue when navigate logged off on computer, on the phone or tablet, when I click on the image I get an error saying: "Sorry, you are not allowed to preview drafts". Works great while logged in thats all, please help!

      1. I though the issue could be that it was linked to a post and not a page, so I created a page instead, still the same issue.
        Is surely published because if I link the page to anything else from elementor works just fine, it only doesnt work from the gallery links through your code, if that makes sense.
        Thanks Maxime

      2. I understand what you are saying, however technically it's very improbable...

        The thing is, the browser really has no way to differentiates a JavaScript link and a normal link. When you are on the destination page, it becomes essentially the exact same...

        So I don't know what the issue is, but I doubt it's related to my code... thousands have used it successfully over a few years now, so it's working!

        Maybe the way the URL is written in the JavaScript is causing issues.

      3. Solved it, issue was on the URL as you said, for some reason I copied a longer URL than needed and causing the issue, flowing smooth now. Thanks.
        ,You mention Elementor is going to solve this issue soon, when do you that will happen? ar if so once thats the case we should remove the code attached and redo right away or will still be compatible?
        Last question, Id like each photo on the Gallery to have a caption under the photo, like on a regular single image attached, any way we can do that wihin the Gallery? Text on top of the image doesnt work for my architectural needs. Here my site:
        https://goarphitects.com/
        Thanks

      4. I wrote this years ago actually. It doesn't look like they will add this feature...

        Yes you can have the text on the bottom with the proper custom CSS. It's a bit out of scope for this tutorial though, but you can reach out to me if you would like custom work.

        Cheers!

  86. hi.
    i can't figure out how to link every image in my gallery.

    i used this:

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

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

    //Edit the links HERE
    var links = [
    'https://shrsl.com/4433r/',
    'https://shrsl.com/442yk/',
    'https://shrsl.com/442ym/',
    'https://shrsl.com/442yt/',
    'https://shrsl.com/442yx/',
    'https://shrsl.com/442z0/',
    'https://shrsl.com/442z2/',
    'https://shrsl.com/442z4/',
    'https://shrsl.com/442z8/',
    'https://shrsl.com/442za/'
    ];

    var _loope = function _loope(i) {
    if (links[i].length > 4) {
    filteredImages[i].style.cursor = "pointer";
    filteredImages[i].addEventListener('click', function () {
    window.open(links[i]);
    });
    }
    };

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

    });

    my website is markandmine.com

  87. Great article and comments!

    If you want the links to be "crawlable" by Google then I would suggest the following code:

    Note: Google can follow links only if they are an tag with a href attribute. Links that use other formats won't be followed by Google's crawlers. Google cannot follow links without a href, or links created by script events.

    Here is the alternate script which will make the links crawlable:

    The Gallery "Link" field must be set to "Custom URL" and the "URL" field does not require a value.

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

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

    // Edit the links HERE
    var links = [
    'https://canwebservices.ca/',
    'https://onqbilliards.ca/',
    'https://tailgators.ca/',
    'https://aimvalley.com/',
    'https://tour30victoria.ca/'
    ];

    // Add href and target to anchor tag
    for (var j = 0; j < filteredImages.length; j++) {
    filteredImages[j].setAttribute("href",links[j]).setAttribute("target","_blank");
    }

    });

    1. Oops!
      With jQuery you can chain them along but in plain JS you need to separate the setAttributes. In my example above I chained them together.

      Adjust the code above to this for plain JS
      for (var j = 0; j < filteredImages.length; j++) {
      filteredImages[j].setAttribute("href",links[j]);
      filteredImages[j].setAttribute("target","_blank");
      }

      1. Thank you Roland!

        I rewrote the code in the tutorial according to this technique. It's better to add the href to the <a> element indeed! I'm not certain why I didn't do this originally... maybe they changed the markup?

        Anyhow now the tutorial is using this improved method. Thanks again.

        Cheers!

  88. Hi Maxime! I tired this on my website and it's not working. As far as I can see everything is fine, maybe I need to change something in the markup.

    This is the code:

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

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

    let links = [
    'https://yellowme.com.ar/biergarten/',
    'https://yellowme.com.ar',
    ];

    linkedImages.forEach((linkedImage, i) => {
    if (links[i] && links[i].length > 0) {
    linkedImage.style.cursor = "pointer";
    linkedImage.href = links[i];
    }
    });

    });

    It's applied here:
    https://yellowme.com.ar/home/

    Help please!

    1. Greetings,

      It's working actually! I visited your website, and the first two images have a link on them.

      If it's still not working for you, could you try in incognito mode? Could you also try to flush your cache?

      Cheers!~

      1. I'ts working. I had to change the gallery link to custom url.

        Thanks Maxime!

  91. When I tried Media, the image just appears in a pop up instead of redirecting to the link. The top row that you see is where I started adding images one by one. There are 58 so I'd rather not go that route. Plus I need to do it again on another page with 100 county seals.

    1. I forgot to mention that I'm referring to the pro version of E-Gellary where it can't show the names of the images under each image.

  94. Hi, I am trying to implement the popup solution. it works but with the following problem: it only works the first time. If I close the popup and want to open it again, it no longer works.

  96. I have a question about the solution with the popup. Is there a way to transfer the picture ID or some other reference from the clicked picture in the gallery to the popup. the idea would be that the clicked image with title and description would be dynamically transferred and displayed in the popup.

    1. Hey lord,

      This is possible however is well beyond the scope of this tutorial. You can reach out to me with the complete project requirements if you would like this done as custom work.

      Cheers!

  97. Hi!
    I added your code but the code doesn't look like the same code from the video. Am I doing it incorrectly? All I want to do is have 4 images links to the corresponding part.

    Ronnie

    1. Hey Ronnie!

      I updated the tutorial since the video. Read it through, in particular the part that says "Important: videos watchers, these instructions aren’t in Imran’s video!"

      Cheers!

      1. YAY!!! I missed that one step for the # so thank you so much! I am so glad you responded and your response time was impeccable!!!

  98. Hi, if i put the code and gallery at the footer (template) it doesn't work, but if its on the page it is working fine. Please advice how to modify the code inside a footer template

      3. Greetings!

        I went to that page and tested, and it's working fine.

        It won't work for both of them (the one on the page AND the footer), but if you remove the one on the page, then it works for the one in the footer.

        If you need this to work in the footer, and sometimes also on your pages, you will need to make the selector unique for your footer version.

        Change this line:

        document.querySelectorAll('.e-gallery-item');

        to

        document.querySelectorAll('.footer-gallery .e-gallery-item');

        And give the class name footer-gallery to your gallery element that's in your footer. Then add that version of the code in the footer.

    1. Bonjour Maxime,

      Je ne comprends pas exactement ce que tu veux dire...

      Si tu as plusieurs galleries, le code fonctionne de la meme manière... tu ajoutes les liens, et ils vont se lier à l'image appropié.

      Donc si ta première gallerie à 3 liens, ta deuxième 4 liens, dans le code tu ajoute 7 liens.

      Cheers!

  101. Thank you. This works great. I do tire of the constant razzle dazzle from Elementor that is half-baked and therefore poorly implemented. I think they would do well to embrace that less is more and then do 'that' really well. Thank goodness for you and your team providing great workarounds!

    1. Yes I agree, I also find it disappointing how poorly some of the features / elements are done.

      So I come to the rescue! hehe.

      Cheers!

  105. As opposed to what you are doing here, how can I use this code to link multiple galleries together? In other words, I have 5 separate galleries on one page and I want to be able to open one gallery and seamlessly move from gallery to gallery after the last image in each gallery. Is this something that can be done with this code or will it require different coding?

  106. I would like to be able to set the hover "on" for select images in the gallery. Can I add a unique class to each individual image so I can use CSS to make them stay on?

  108. Hi, I am old and total novice and have very little tech, never mind code knowledge. I have set up a gallery in pro elementor which contains images of literary reviews I have done on a particular website. I have done most of what you said, but I have no clue where to add my links and may be misunderstanding your instructions. Can you tell me exactly (in very basic laymen's terms) where I put my links? I was editing your links by inserting my own, and this doesn't work. Any help will be greatly appreciated.

      1. Hello Maxime,

        I don't know if you can help me, but it would be really nice. I just followed all the previous steps, I have 15 images so I put 15 links as mentioned. However, all the images bring the user back to the same page (the same one where we find the gallery). I don't know what I did wrong, because I followed everything to the letter. Here's the website page where I'm trying to insert the links: https://solocom.ca/realisations/

        Thank you very much.

      2. Greetings Camila!

        I had a look at your site and everything seems to be working perfectly well, so I presume you have fixed this already.

        Cheers!

  110. Hello Maxime,

    I have followed your instructions to a T but when I view page and click on images it takes me straight to the page I'm trying to fix.

    Am I doing something wrong?

    1. Greetings Beth!

      Yes it works for multiple galleries. You still only need a single HTML element, but then you just add more links. The links will automatically start to apply to the other galleries.

  112. I have successfully set up a gallery with links using this code, but now I am trying to set up another gallery where each image allows a file to be downloaded. I can get the image to link to the downloadable file, but clicking it does not download the file. I have implemented the option to open a new window, but this has not solved it either. Any ideas on how to accomplish this?

    1. Greetings Nicole!

      Try the following:

      Directly under the line

      linkedImage.href = links[i];

      Add this line:

      linkedImage.setAttribute('download','');

      Let me know if it works!

  114. Hi Maxime,
    Many thanks for sharing this solution! It was exactly what I was looking for! Unfortunately, I am having the same issue as Jay. I just updated to Elementor Pro 3.18.3 on a Mac, using Chrome. The website link is: https://www.mariekebuijtendijk.nl/portfolio/
    I hope you can provide me with some insight where I may have gone wrong. I have no experience in using code. Many thanks!
    Marieke

    1. Fixed it! I needed to add a "/" at the end of my links which I wasn't aware of, and set the gallery to "custom URL" (with link set to "#") instead of "none".. Thank you very much for sharing the code and the instructions!

      2. I was wondering if you could also help me with a related question; I have added links to individual pages for each item in the gallery widget. The widget contains five galleries and I would like to let users easily navigate my portfolio by adding a "back to portfolio"-button at the bottom of each page. Ideally, users would be redirected to the specific gallery that they were previously browsing (e.g. the "medical" gallery), rather than returning to the default gallery page. The question relates to the same page; http://www.mariekebuijtendijk.nl/portfolio.

        Would it be possible to create links to specific filters within the gallery widget? It would be really useful if there was a way in which I can link to each specific gallery within the widget.

        Hope I have phrased my question clear enough, if any clarification is needed please let me know. Many thanks for taking the time to answer questions, it's extremely helpful!

      3. Hey Marieke!

        Yes actually there is a relatively simple way for this: having a "back" history button. It replicates clicking the "Back" button of the browser, which keeps you exactly where you were on the previous page.

        Here is how you can add a back history button with Elementor.

        Cheers!

      4. Hi Maxime,

        Thank you for your previous assistance. I've made progress with building the website and started translating it into a second language using the TranslatePress plugin. However, I've encountered an issue with the HTML code for the gallery. When using this plugin, clicking on gallery items leads to pages displayed in the default language (Dutch) instead of the selected language (English).

        Is there a way to ensure that when viewing the portfolio page in English (www.mariekebuijtendijk.nl/en/portfolio), the gallery items link to the English version of each page? For example, currently, clicking on the first item directs to https://www.mariekebuijtendijk.nl/medisch-omslagontwerp-wetenschappelijk-proefschrift/, but I would like it to direct to https://www.mariekebuijtendijk.nl/en/medisch-omslagontwerp-wetenschappelijk-proefschrift/.

        Can you help me find a solution to ensure that all gallery items link to the /en/ pages when English is selected as the language on any previous page? The issue only occurs with the gallery items, as when I go to the home page, select English, and then navigate to other pages (e.g., "about" or "contact"), I stay in the English environment. I really hope you can help me find a solution!

        Thank you once again for your help!

      5. Greetings Marieke!

        I don't know how TranslatePress works, but essentially that way you would do this is to "translate" the HTML element, so that the code loading on the english page has the english links, and the code loading on the NL page has the NL links.

        I hope this helps!

        Cheers!

      6. Thanks for getting back to me so quickly! I had some trouble figuring out how to translate the HTML element, but discovered that it's possible to restrict the HTML element containing the links to a specific language through the "advanced settings" in Elementor.

        The following approach resolved the issue for me: I duplicated the HTML element, keeping the original for the standard language (Dutch) and dedicating the second element to English. Within the latter, I manually added /en/ to all links. Maybe that's what you had in mind too! Just thought I'd share in case it helps someone else out.

  115. Hi,
    Thanks for the code it's exactly what I needed for my website. It works fine on Chrome, but in Safari and Firefox, the url is not put in the href. Instead I have this #.
    I don't understand why.
    Thanks

    1. Yes, the updated tutorial is the written version here, please read from the start, you should have no problems!

      Cheers!

  117. Hey, I cannot for the live of me get this to work, but I'm sure the blame is on my side! I'm using a pro gallery, followed the steps and added JUST the pop up code and added in my pop up ID's, nothings happening. Do I need to add the pop up code in addition to the first code you provide on this page? Sorry, I'm a complete novice here!

  118. Hi Maxime, just like Camila, I can't understand why clicking on an image sends me back to the general gallery page. I added # as custom link as instructed. Here's my code below. What am I missing??

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

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

    let links = [
    'https://www.larbredespossibles.be/&#039;,
    'https://www.larbredespossibles.be/&#039;,
    'https://www.atelierscasaverde.be/&#039;,
    'https://www.atelierscasaverde.be/&#039;
    ];

    linkedImages.forEach((linkedImage, i) => {
    if (links[i] && links[i].length > 0) {
    linkedImage.style.cursor = "pointer";
    linkedImage.href = links[i];
    }
    });

    });
    </script>

  119. Good afternoon, Maxime. I tried to scroll through as much Q&As as possible.
    So I have 8 images and have set them all to Custom URL and #. I changed the 8 URLs but when i test it and click on the image nothings happens. All of the images AND the URL in my browser tab show #. It doesn't change or show the URL i have in the script:

    Can you help me, please? Thanks in advance.

  120. Thank you!

    It didn't work at the beginning because I forgot to put the apostrophe before and after the links + the comma. Now it works perfect!

    1. Welcome!

      Really glad you found it helpful!

      Yes these quotes and commas are really important in JavaScript, omitting a single one can break the whole thing.

      Cheers!

  121. Hi Maxime, thanks for your response. I am not using the Image Carousel. I am using the Gallery Pro element, as I wanted the option to use the offset sides feature. I guess i could switch to the Image carousel but that one doesn't have the offset sides feature.
    How can I make this work with what i'm using, the Gallery Pro element?

    1. The Gallery Pro element isn't a slider though...

      I see you are using the new Carousel element (e-n-carousel), and have normal Images element in it.

      Just set your links directly on the Images elements, it should work. You don't need any custom JavaScript.

      Cheers!

    2. ... Is there supposed to be something entered where the "i" is, ex. links[i]? I have 8 images, to start.

      linkedImages.forEach((linkedImage, i) => {
      if (links[i] && links[i].length > 0) {
      linkedImage.style.cursor = "pointer";
      linkedImage.href = links[i];

  122. Hi Maxime, I have a gallery in a footer that I want to include links. Your code works great for this. But on some pages I have another gallery, and that is above the footer. The url's apply to that gallery first. Is there a way I can target a specific gallery?

    1. Greetings Matt!

      Yes certainly.

      Change this line:

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

      To this:

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

      And then give the class name footer-gallery to your footer gallery.

      Cheers!

Leave a Reply

[Pro] Elementor Gallery Links - Unique Link for Each Image

Resources

Premium

Account

Discounts

Facebook Youtube Envelope

© Copyright 2024 Element How
Privacy Policy | Terms & Conditions