Make any widget linkable?

Custom code
1

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!

2

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.

3

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.

4

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

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

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

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

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

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

3 Likes
5

Thank you! Thats exactly what I was looking for :slight_smile:

6

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.

7

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.

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

</script>
1 Like
8

Thank you, I’ll try this out!

9

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?

10

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

11

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

12

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

13

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

14

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

15

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

2 Likes