Add link to picture in slideshow

Custom code
1

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 :smiling_face_with_tear:

2

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:

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

1 Like
3

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 :slight_smile:

1 Like
4

Same here. Thanks for sharing!

5

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

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.

<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 :slight_smile:

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

6

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

1 Like
8

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?