# Make any widget linkable?

**URL:** <https://forum.readymag.com/t/make-any-widget-linkable/391>\
**Category:** Custom code\
**Created:** [June 26, 2022, 7:36pm UTC](https://forum.readymag.com/t/make-any-widget-linkable/391 "2022-06-26T19:36:31Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dave\_Mattock](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/dave_mattock/32/235_2.png) [@Dave\_Mattock](https://forum.readymag.com/u/Dave_Mattock)\
**Post date:** [June 26, 2022, 7:36pm UTC](https://forum.readymag.com/t/make-any-widget-linkable/391/1 "2022-06-26T19:36:31Z")

</div>

Hey all. Does anyone know of any code to make widgets linkable that don’t allow it by default? Specifically I’m looking to make a slideshow or video linkable to another page in my project. Thanks a bunch!

---

<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 28, 2022, 9:54am UTC](https://forum.readymag.com/t/make-any-widget-linkable/391/2 "2022-06-28T09:54:56Z")

</div>

one way would be to put a transparent shape above the widget and add a link to the shape…  
other way would be to add the link via custom code.

---

<div class="post-metadata">

**Author:** ![Dave\_Mattock](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/dave_mattock/32/235_2.png) [@Dave\_Mattock](https://forum.readymag.com/u/Dave_Mattock)\
**Post date:** [June 28, 2022, 6:09pm UTC](https://forum.readymag.com/t/make-any-widget-linkable/391/3 "2022-06-28T18:09:46Z")

</div>

Thanks for the reply! The only trouble is that I would like the slideshow or video to start to play on hover, and when I place a transparent shape overtop it cancels this out.

---

<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 29, 2022, 11:08am UTC](https://forum.readymag.com/t/make-any-widget-linkable/391/4 "2022-06-29T11:08:44Z")

</div>

ok then you have to go with custom code, for example like this:

```auto
<script>
$("[data-id=62bacd27cb6e76003823fe87]").find(".image").on('click', function() {
   location.href = "http://readymag.com";
   });
</script>

```

you have to exchange the data-id number to your data-id of the slideshow-widget you can find via the dev-console and exchange the url you want to link to.

You can also change the cursor to a pointer-cursor that is suggesting that this is a link.

Jquery way would be:

```auto
$("[data-id=62bacd27cb6e76003823fe87]").css({"cursor":"pointer!important"});

```

But you can also do it with pure css, which might be slighlty the more elegant solution:

```auto
[data-id="62bacd27cb6e76003823fe87"] {
cursor:pointer!important;
}

```

One could also try to adress the different images in a Slightshow to different linkpages.

---

<div class="post-metadata">

**Author:** ![Dave\_Mattock](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/dave_mattock/32/235_2.png) [@Dave\_Mattock](https://forum.readymag.com/u/Dave_Mattock)\
**Post date:** [June 29, 2022, 6:40pm UTC](https://forum.readymag.com/t/make-any-widget-linkable/391/5 "2022-06-29T18:40:10Z")

</div>

Thank you! Thats exactly what I was looking for 🙂

---

<div class="post-metadata">

**Author:** ![tomalprice](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/tomalprice/32/837_2.png) [@tomalprice](https://forum.readymag.com/u/tomalprice)\
**Post date:** [February 15, 2023, 10:19am UTC](https://forum.readymag.com/t/make-any-widget-linkable/391/6 "2023-02-15T10:19:58Z")

</div>

This is so helpful, thank you. I’m looking at trying to make each picture in a slideshow linkable to a different page - you suggest that might be possible at the end of your post:

“One could also try to adress the different images in a Slightshow to different linkpages.”

Would you know how this might be achieved?

Many thanks in advance.

---

<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:** [February 15, 2023, 10:29am UTC](https://forum.readymag.com/t/make-any-widget-linkable/391/7 "2023-02-15T10:29:03Z")

</div>

hey,

I haven´t tried it so far. But as all images inside an slideshow have an data-id you could add the links via jquery/javascript onto this images.

this means you put this code inside the before \</ body\> section and excnange the data-id.

```auto
<script>
setTimeout(function() {
 $('[data-id=5fae6afd5eda7700a34b906a]').attr('href','http://www.google.com');
 }, 2000);  

</script>

```

---

<div class="post-metadata">

**Author:** ![tomalprice](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/tomalprice/32/837_2.png) [@tomalprice](https://forum.readymag.com/u/tomalprice)\
**Post date:** [February 15, 2023, 10:50am UTC](https://forum.readymag.com/t/make-any-widget-linkable/391/8 "2023-02-15T10:50:49Z")

</div>

Thank you, I’ll try this out!

---

<div class="post-metadata">

**Author:** ![Alexandra\_Kharitonov](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/alexandra_kharitonov/32/982_2.png) [@Alexandra\_Kharitonov](https://forum.readymag.com/u/Alexandra_Kharitonov)\
**Post date:** [April 1, 2023, 11:04pm UTC](https://forum.readymag.com/t/make-any-widget-linkable/391/9 "2023-04-01T23:04:54Z")

</div>

hello, I tried this way with readymag widget Shots, and unfortunately it didn’t work. Do you have a idea how I can be doing widget shots linkable?

---

<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:** [April 5, 2023, 7:32am UTC](https://forum.readymag.com/t/make-any-widget-linkable/391/10 "2023-04-05T07:32:43Z")

</div>

as a workaround you could place a transparent shape above the shots widget and set the link onto this.

---

<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, 4:43pm UTC](https://forum.readymag.com/t/make-any-widget-linkable/391/11 "2023-06-13T16:43:34Z")

</div>

Hello  
Thanks for your answer  
it seems to me I’m doing something wrong, it doesn’t work in my project  
data-id and link are correct, but it still doesn’t work

---

<div class="post-metadata">

**Author:** ![Vienaragis\_Puikusis](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/vienaragis_puikusis/32/1291_2.png) [@Vienaragis\_Puikusis](https://forum.readymag.com/u/Vienaragis_Puikusis)\
**Post date:** [August 11, 2023, 11:27am UTC](https://forum.readymag.com/t/make-any-widget-linkable/391/12 "2023-08-11T11:27:23Z")

</div>

Hi! This is super useful! Is there a way to make the shots widget into an anchor link?

---

<div class="post-metadata">

**Author:** ![Samus](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/samus/32/1146_2.png) [@Samus](https://forum.readymag.com/u/Samus)\
**Post date:** [August 17, 2023, 10:26pm UTC](https://forum.readymag.com/t/make-any-widget-linkable/391/13 "2023-08-17T22:26:01Z")

</div>

As neueMeta mentioned, placing a transparent shape on top of the Shots widget is the cleanest solution!

---

<div class="post-metadata">

**Author:** ![jubilri](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/jubilri/32/1194_2.png) [@jubilri](https://forum.readymag.com/u/jubilri)\
**Post date:** [August 19, 2023, 3:30am UTC](https://forum.readymag.com/t/make-any-widget-linkable/391/14 "2023-08-19T03:30:27Z")

</div>

I would LOVE to use this method to make Shots that’s animated on hover to also be a link. But the script isn’t working for me. Could you please help out to do the same method with Shots?

(However, the CSS works! So the data-id right.)

---

<div class="post-metadata">

**Author:** ![Vienaragis\_Puikusis](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/vienaragis_puikusis/32/1291_2.png) [@Vienaragis\_Puikusis](https://forum.readymag.com/u/Vienaragis_Puikusis)\
**Post date:** [August 24, 2023, 12:16pm UTC](https://forum.readymag.com/t/make-any-widget-linkable/391/15 "2023-08-24T12:16:06Z")

</div>

Hey,  
I had the exact same issue! I tried placing a transparent shape over my shots, but it disabled the hover feature. However, if you add the transparent as a trigger for the shots, hovering will still work + you can add a link to the shape. Hope this helps 🐝