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.

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