Js_slideshow Hyperlink/link - Question | JoomShaper

Js_slideshow Hyperlink/link

Yahya Kemal College

Yahya Kemal College

SP Page Builder 1 month ago

Hello JoomShaper Team, In the Slider module (js_slideshow), when we add only an image, there is no option to add a hyperlink/link to that image.

It would be very useful to have this feature, because sometimes we want to add just a visual design and make the entire image clickable. Currently, we can add alt text and other settings, but there is no link option.

Could you please consider adding this feature in future updates?

Thank you.

0
3 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 month ago #220049

Hi

Thanks for contacting us and thanks for your opinions. I will add it to our feature request list, so that our team can take care of it.

-Regards.

0
RE
Roger Evans
Accepted Answer
1 month ago #220242

I created a button that was the same size as the content of the image, made it transparent (removed hover animations) and it essentially works. This way the URL is custom to each image of the slider.

Steps:

  • Select Slideshow addon, add CSS class name (ie. hero-click-slider)
  • Edit first slideshow item; Add item
  • Set that item as a button
  • Add URL
  • Make Label blank
  • Set Color, hover color, background, background hover, border color, and hover border color to fully transparent
  • Set style padding to cover the majority of the image (I used 600px for all )
  • I was getting a green overlay so I added Custom CSS (Page Settings) to eliminate any of those for the whole slideshow addon.
/* Turn off hover overlay anywhere inside the hero slider */
.hero-click-slider:hover,
.hero-click-slider:hover * {
background-color: transparent !important;
filter: none !important;
box-shadow: none !important;
}

/* In case SP Page Builder uses overlay pseudo-elements */
.hero-click-slider:hover::before,
.hero-click-slider:hover::after,
.hero-click-slider:hover *::before,
.hero-click-slider:hover *::after {
background-color: transparent !important;
opacity: 0 !important;
filter: none !important;
}

This did it. Now the majority of my hero image is clickable. This might turnout clunky later, plus, I imagine the padding will need to be different when displaying for different screens.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 month ago #220570

Thanks for sharing the solution.

0