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…

[Pro] Elementor Gallery Links - Unique Link for Each Image 2
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 3

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

333 Responses

  1. 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];

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

  4. Hey !

    Thanks a lot for this tutorial. As some of people there, I had issues about the "random" sorting.

    I found an other way :

    Add an HTML link in the caption field of each image. This isn't ideal, nor probably best practice, but it works for me.

    <a href="http://Internet URL goes here.">Title the visitor sees.</a>

    Next, you need to set the Overlay->Title option in the Elementor Gallery widget to Caption.

    I'd love to know if this works for you.

    BR

    Arthur

  5. Hi, this worked perfectly. This might be a silly question, but I've added a second gallery to the same page and just want these images to have the lightbox display setting rather than individual links. The lightbox function isn't working properly on the front end for the second gallery on the page. Is this due to the code on the page? Is there a workaround for this? Thanks!

    1. Greetings Smason!

      In that case, 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

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

      to this

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

      Cheers!

    1. Greetings!

      It should be working just fine with multiple filter galleries, as indeed you can even see a working example on this very page!

      Cheers!

      1. Thanks for the prompt response, but it is not working with filtered gallery. Kindly please help me.

    1. Greetings!

      You need to make your images links.

      Please see the first part of this written tutorial, about "To begin with, set your Elementor Pro gallery "link" setting to "custom"

      Cheers!

  8. I have followed the eac and every step according to the video. It perfectly works with single gallery option but not working with multiple fiiltered gallery. I have made the link to custom URL as you described in the video but still I am facing issues.

    1. Greetings!

      I can see from the DOM that they are not links.... follow the instructions very carefully please, in the tutorial, not the video.

      Cheers!

  10. Hello all!,

    Can I replace the web links for anchors to use the images of the image gallery to navigate through my site?.

    Thanks in advance!

    1. Greetings!

      You could, but it's not a great idea to use this as your primary navigation.

      You can't add proper ALT text as the images are actually background images from the CSS, and not proper <img> elements...

      1. Hi Maxime!,

        Thank you very much for your quick response.
        I'll take a look to the tutorial.

        Best!,
        Juan

  11. Olá, teria como eu utilizar esse codigo utilizando as URL ja atreladas as imagens? Pra evitar ter que adicionar manualmente cada link

  12. Hi Maxime! I used this code and it was working fine when I first launched my site, but now it's stopped working. I don't know what could have happened. My URL is: redchoux.com and here is the code I have:

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

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

    let links = [
    'https://redchoux.com/senior-photography/&#039;,
    'https://redchoux.com/professional-headshots/&#039;
    'https://redchoux.com/healthcare/&#039;,
    'https://redchoux.com/family-photography/&#039;,
    'https://redchoux.com/event-photography/&#039;,
    'https://redchoux.com/photo-restoration/&#039;,
    ];

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

    });
    </script>

      1. Thank you for this edit correction, but the links still aren't working. Not sure what I've done wrong.

    2. Greetings Michele!

      Follow the instructions at the very start of the tutorial to make each image a link, the part called " To begin with, set your Elementor Pro gallery "link" setting to "custom" "

      Cheers!

  14. HI THERE!

    I used the HTML code to open the Elementor Pro Gallery image links, and everything worked perfectly, but NOW only my images with the ULR wp/content/upldoads (which opened with Lightbox), stopped opening in the latest Elementor update. Do I have to change the code so that they open with POPUP? I prefer it to continue as it was before, with the images opening in Lightbox.

    Can someone help me, please?

  15. Hey there!

    Quick question for someone, I'd appreciate the help!

    So, I've added the HTML code to the top of my Elementor Pro Gallery and it works great with the link-out to new window code. However, when I get past my first row of images, 5, it's not linking the URL to the following images. I'm adding the urls within the parameters set in the code and adding them as described, for example: 'url', 'url', but for some reason, it's not adding the URL to the images following the first row.

    I need to add URLs to 15+ images within the gallery.

    This is probably a user error but if anyone has any insight, I'd greatly appreciate the assist!

  16. Thank you, Maxime! Here's the code I have so far. The first five are working, however the last two are not just yet.

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

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

    let links = [
    'https://www.imdb.com/title/tt11348164/?ref_=fn_al_tt_1&#039;,
    'https://www.imdb.com/title/tt13395224/?ref_=nv_sr_srsg_0_tt_8_nm_0_in_0_q_country%2520gold&#039;,
    'https://www.imdb.com/title/tt13988984/?ref_=nv_sr_srsg_2_tt_6_nm_2_in_0_q_tenkiller&#039;,
    'https://www.imdb.com/title/tt15330144/?ref_=nv_sr_srsg_0_tt_7_nm_1_in_0_q_seven%2520cem&#039;,
    'https://www.imdb.com/title/tt18552372/?ref_=nv_sr_srsg_0_tt_1_nm_7_in_0_q_fairwood&#039;,
    'https://www.imdb.com/title/tt12661008/?ref_=nv_sr_srsg_0_tt_8_nm_0_in_0_q_out%2520of%2520exile&#039;,
    'https://www.imdb.com/title/tt10474680/?ref_=nv_sr_srsg_0_tt_7_nm_1_in_0_q_chicken%2520house&#039;,
    ];

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

    } else {
    linkedImage.removeAttribute('href');
    }
    });

    });
    </script>

      1. Awesome and yes, but is there any reason why they aren't linking out from the code I posted?

    3. And keep in mind when you are using masonry that the order of the images isn't 'as they show up on the screen', but 'as they show up in the DOM'.

      So right click> inspect to get the proper order, but it think it should match the order that you have them when you are selecting them in the Elementor UI.

      Hope this helps!

  19. How do I use this in in a popup?

    So I want to add theis gallery on a page and then when you click on an image it opens a popup I make (not the lightbox) where the same gallery is inserted (but bigger and full screen) then it scroll down to that target image.

    So lets say I click image 4 on the page, a popup comes on screen and scroll to image 4.

  20. I've had this WORKING on my website for about 6 months... last week with no changes it stopped. Did Elementor make an update or something to where the code doesn't work?

  22. P.S.

    Max, funny thing: I was playing around with it on my other pages with a gallery. I mistakenly set the link to "media file" instead of "custom url". And what do you know - clicking the images took me to the URLs I specified in the code! Was that a fluke or what?

  23. Hi Max, thanks for your sharing... I tried many times, but it doesn't work for me, the cursor changes when I hover, but nothing happens if I click, could you give me an insight? Thank you so much!!

    My code is:

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

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

    let links = [
    'https://www.erzoarts.com/&#039;,
    'https://www.erzoarts.com/&#039;,
    'https://www.erzoarts.com/&#039;,
    'https://www.erzoarts.com/&#039;,
    'https://www.erzoarts.com/&#039;,
    'https://www.erzoarts.com/&#039;,
    'https://www.erzoarts.com/&#039;,
    'https://www.erzoarts.com/&#039;,
    ];

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

    } else {
    linkedImage.removeAttribute('href');
    }
    });

    });
    </script>

    My page is: https://erzoarts.com/gallery/

  24. Hi this looks great. I'm wondering if there is a way to have the each gallery image pop up into the lightbox as it does without this HTML code snippet, and then be clickable to go to a URL (specifically the product purchase page of the item). I am trying to make an aritst portfilio, that shows the gallery, but then can click the image to show it in the lightbox larger, but then be clickable to go to purchase, if that makes sense. Perhaps I am just trying to complicate things or maybe there is an easier way to do it that what I am attempting.
    Thanks for any help

  25. Hi,

    Thanks for the clear explanation on this page! I'm trying to apply the gallery links as described, but unfortunately it's not working properly on my end. On my website (https://bureaublikwerpen.nl/sponsoren/), I'm using a gallery with Elementor, but the links aren't opening as expected.

    Could someone take a look to see if I might be missing something or if there's a conflict? Any help would be much appreciated!

    Thanks in advance!

    1. Hey Justin!

      This tutorial is specifically for the Gallery Pro elementor element that comes with Elementor Pro. On your website you are using another gallery element, it won't work with that one.

      I hope this helps!

  26. Hello
    I have several galleries. Surprisingly, in one gallery, the code works with the "Media File" link and not with the "Individual Link" with "#." In the other gallery, the code doesn't work.
    Best
    Martin

Leave a Reply

Element.How Newsletter

Sign up for our newsletter to get Elementor related updates and tutorials

Close