Search…

X3 Photo Gallery Support Forums

Search…
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

Slideshow intro, make caption link?

19 Mar 2021, 08:21

I'm using a slideshow intro with captions. Their default behaviour (darker background on hover) makes them look/feel like they are a link. They are not, but actually it would be cool if they could be. Is this possible?

I managed to make the whole image a link, but since the caption is in front of it on the z-axis the caption itself doesn't react to that.
I also managed to make the single components (title, description) individual links, but this became a styling nightmare and the clickable area for the links doesn't cover the caption box.

If it's not possible or too complicated I'd like to remove the hover effect to get rid of that "this is a link" feeling.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Slideshow intro, make caption link?

22 Mar 2021, 12:34

Since it's very unusually quiet here: Is it complicated or did you just miss this topic?
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Slideshow intro, make caption link?

22 Mar 2021, 23:39

Sorry, I missed this post earlier!

I understand what you are saying, but could you explain exactly what you want to achieve? Yes slideshow captions will change background opacity on hover, similar to the X3 popup, so that the user can emphasize the caption. Yes you should be able to set images as link, in which case the entire image (click) would become a link. As for links in the caption, you can of course use the <a> anchor tag to make links within the caption text, or all the text. Ultimately, the caption itself is never a link no ... It's either the image, or the text in the caption, but not the caption element.

If you need to block the caption hover event. Settings > Custom > Custom CSS:
Code
.fotorama__caption__wrap:hover {
    background: rgba(0,0,0,.7);
}
The above basically sets hover to the same as what it is non-hover.
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Slideshow intro, make caption link?

23 Mar 2021, 05:34

mjau-mjau wrote: I understand what you are saying, but could you explain exactly what you want to achieve?
I wanted to achieve what you say can not be achieved:
Ultimately, the caption itself is never a link
I searched a little more and found this possible solution: https://stackoverflow.com/questions/796 ... nto-a-link I understand the concept, but I don't think I can apply this on my own without hours of trial and error. So unless you say this is something you can easily give me some lines of code for I will just deactivate the hover effect, it's no big deal.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Slideshow intro, make caption link?

23 Mar 2021, 07:31

metallissimus wrote:I searched a little more and found this possible solution: https://stackoverflow.com/questions/796 ... nto-a-link I understand the concept, but I don't think I can apply this on my own without hours of trial and error. So unless you say this is something you can easily give me some lines of code for I will just deactivate the hover effect, it's no big deal.
The simple answer here is that the caption element is simply a <div> element and not an <a> link element. We can't do that in X3, because 1. The image itself might be a link, and 2. the caption text might contain links, and you can't have <a> tags inside <a> tags. Besides, there is no option in X3 "[caption element link]". At best, you could hack it with Javascript by dynamically updating tags, but this is definitely a true "hack" ... Where would you assign the link? And what does it really solve? It only creates a scenario where the padding of the element is clickable, instead of "only" the text. After all, you can easily wrap all the text inside <a></a> to make it a link ... It doesn't seem worth it, but here is a hack:

1. Add your caption with the link. Something like this:
Code
<a href="..." class="slideshow-link">text be here</a>
2. Settings > Custom > Custom CSS: Remove original padding from the caption element:
Code
.fotorama__caption__wrap {
  padding: 0;
}
3. Settings > Custom > Custom CSS: Add the padding internally to the link instead:
Code
.slideshow-link {
  padding: .8em 1.5em;
  display: inline-block;
  color: inherit;
}
Something like that. If you only want to affect caption padding on the specific page, add #2 into page Settings > Page > CSS instead. You may also need to do further style adjustments to the slideshow-link. As you understand, all it really does, is remove the padding from the caption and add it to the link instead, so that the entire caption seems clickable.
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Slideshow intro, make caption link?

23 Mar 2021, 08:03

mjau-mjau wrote:And what does it really solve?
Usually something that changes on hover is clickable, which is also true for elements that change the cursor to the hand symbol on hover (I believe  this is from the underlying image, but (visually) it appears to be the caption). So right now the caption screems "I am a link", but it actually isn't.

I will try out your suggestion, thank you.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Slideshow intro, make caption link?

24 Mar 2021, 02:49

Mouse position/hover is used plenty to highlight various elements while the user interacts, without being a link, for example tables (rows), dropdown menu's, tooltips, and in the case of X3, making captions clearer to read. It's unfortunate that the cursor is set to "pointer", as this definitely emphasizes that something is clickable, although in the case of the slideshow it means the slideshow can be clicked ... Perhaps it shouldn't be like that, but this will definitely be prioritized in front of links inside a caption element. Besides, the slideshow produces a "pointer" cursor regardless of hovering over the caption or not.

So another option for you, would be to DISABLE the "pointer" cursor on slideshow hover, which means the cursor would only turn into a pointer when user hovers the actual link in the caption.
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Slideshow intro, make caption link?

24 Mar 2021, 07:27

I ended up removing the effect and the pointer on caption hover, styling is just too complicated otherwise and not worth the effort.

Maybe this should be default?
Code
.fotorama__caption__wrap {
  cursor: default;
}
At least I don't see a reason why the caption should change the cursor.

Edit: I see now – it's because clicking the caption is like clicking the image below.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Slideshow intro, make caption link?

24 Mar 2021, 10:58

The "slideshow" layout used in X3 (based on fotorama.iois somewhat dated by now, and not something we spent much time optimizing specifically for X3. In time, the slideshow will certainly be re-designed and replaced by a more modern option.