# Add link to picture in slideshow

**URL:** <https://forum.readymag.com/t/add-link-to-picture-in-slideshow/1698>\
**Category:** Custom code\
**Created:** [June 13, 2023, 11:34am UTC](https://forum.readymag.com/t/add-link-to-picture-in-slideshow/1698 "2023-06-13T11:34:20Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![coolllll](https://avatars.discourse-cdn.com/v4/letter/c/f19dbf/32.png) [@coolllll](https://forum.readymag.com/u/coolllll)\
**Post date:** [June 13, 2023, 11:34am UTC](https://forum.readymag.com/t/add-link-to-picture-in-slideshow/1698/1 "2023-06-13T11:34:20Z")

</div>

Hi!  
I want to use a slideshow widget where each picture has a link to another page on the internet  
I’m trying to add code, but it doesn’t work

P.S. I don’t remember what I tried to write in the code anymore 🥲

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [June 14, 2023, 8:39am UTC](https://forum.readymag.com/t/add-link-to-picture-in-slideshow/1698/2 "2023-06-14T08:39:25Z")

</div>

as you ans also others have asked this, here is the solution to setting up different links to slides of an gallery.

In the customcode tab, in the section “before ” paste into this:

```auto
<script>
   
  setTimeout(function() {
    
    
   // slide 1 
   $('[data-id=yourID]').css({"cursor":"pointer"}).on('click', function() {
   // use this to open link in same tab
   window.location.href = "https://www.readymag.com";
   });
    
    
   // slide 2 
   $('[data-id=yourID]').css({"cursor":"pointer"}).on('click', function() {
   // use this to open link in new tab
   window.open("https://www.google.com", '_blank');
   });
    
    
   // slide 3 
   $('[data-id=yourID]').css({"cursor":"pointer"}).on('click', function() {
   // use this to open link in new tab
   window.open("https://www.google.com", '_blank');
   });
    
    
   // slide 4 
   $('[data-id=yourID]').css({"cursor":"pointer"}).on('click', function() {
   // use this to open link in new tab
   window.open("https://www.google.com", '_blank');
   });
    
    
 }, 1000);  

  
</script>

```

Paste in your data-ids of your slides you can find via the dev tools inspector.  
Paste in your desired urls to link to.  
Choose if you want the tab to be opened in a new or same tab.

You need to have atleast 4 different slides in the gallery to work properly. Otherwise RM will duplicate the slides and you have to also get the duplicates via the inspector.

---

<div class="post-metadata">

**Author:** ![coolllll](https://avatars.discourse-cdn.com/v4/letter/c/f19dbf/32.png) [@coolllll](https://forum.readymag.com/u/coolllll)\
**Post date:** [June 14, 2023, 4:14pm UTC](https://forum.readymag.com/t/add-link-to-picture-in-slideshow/1698/3 "2023-06-14T16:14:48Z")

</div>

Thank you for such a detailed answer!

I realized what my mistake was, I entered the data-id of the widget itself, not the picture, and it seems I still wrote the function a little incorrectly on my own…

Your code worked perfectly. Also thank you very much for the note about the 4 slides.  
You are my hero 🙂

---

<div class="post-metadata">

**Author:** ![Andy](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/andy/32/1212_2.png) [@Andy](https://forum.readymag.com/u/Andy)\
**Post date:** [July 13, 2023, 3:11pm UTC](https://forum.readymag.com/t/add-link-to-picture-in-slideshow/1698/4 "2023-07-13T15:11:16Z")

</div>

Same here. Thanks for sharing!

---

<div class="post-metadata">

**Author:** ![Fanette\_Perrineau](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/fanette_perrineau/32/1698_2.png) [@Fanette\_Perrineau](https://forum.readymag.com/u/Fanette_Perrineau)\
**Post date:** [May 9, 2024, 1:50pm UTC](https://forum.readymag.com/t/add-link-to-picture-in-slideshow/1698/5 "2024-05-09T13:50:42Z")

</div>

I have used this code to add a link to an anchor point. Thank you for this 🙂

I am having an issue where the image before and after the linked image is also linking to the anchor point.  
This is the code i have used.

```auto
<script>
   
  setTimeout(function() {
    
    
 // slide 7
   $('[data-id="15c80e9f-06b5-4963-a299-28a348f1dcd5"]').css({"cursor":"pointer"}).on('click', function() {
   // use this to open link in new tab
   $(".content-scroll-wrapper").animate({scrollTop:755},{duration: 700,easing: 'easeInOutQuad'});
    });

   }, 1000);  

  

</script> 
  setTimeout(function() {

```

If there is a better way you think I could do this ist would be greatly appeciated 🙂

Here is the link to the site: [https://my.readymag.com/edit/4627680/2/](https://my.readymag.com/edit/4627680/2/)

---

<div class="post-metadata">

**Author:** ![dylan1](https://avatars.discourse-cdn.com/v4/letter/d/898d66/32.png) [@dylan1](https://forum.readymag.com/u/dylan1)\
**Post date:** [May 27, 2024, 10:20pm UTC](https://forum.readymag.com/t/add-link-to-picture-in-slideshow/1698/6 "2024-05-27T22:20:42Z")

</div>

Thank you for this awesome code!  
Was finally able to get this to reliably work on my site after playing with the Timeout function. Extending it so the script ran after all of the elements on my page had loaded fully worked! Thanks again

---

<div class="post-metadata">

**Author:** ![river\_styx](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/river_styx/32/2937_2.png) [@river\_styx](https://forum.readymag.com/u/river_styx)\
**Post date:** [February 11, 2025, 11:07pm UTC](https://forum.readymag.com/t/add-link-to-picture-in-slideshow/1698/8 "2025-02-11T23:07:37Z")

</div>

is there a code to make a photo on another page link to the same photo in a slideshow?  
something I can do again and again?