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!
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.
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.
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.
Thank you! Thats exactly what I was looking for
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.
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>
Thank you, I’ll try this out!