Caption Toggle

JimR · 2019-02-25 10:33:53

Something isn't making sense.

In my galleries, at the far right of the caption area there is a button to toggle if the caption is shown or hidden. It's an up/down arrow. When I click on it, I see the CSS for the <div class=fancybox-container changing to fancybox-caption-collapsed.

I also see in the <div class=fancybox-caption__body it's changed to be fancybox-caption-collapsed. But, nothing happens.

The caption is still visible, unchanged from before clicking the toggle. The button does nothing. I also just noticed this is true in my BL1 galleries.

Then went to the demos http://theturninggate.net/galleries/ to see how that was working, but I don't find the button appearing in any of those albums. Looking at the CSS the button is not there.

So I'm at a loss. It's not working for me, and I can't find a working demo. How is it that I have the button, but I can't find it anywhere else I'm looking? If it's suppose to be there, how do I get it working?

rod barbee · 2019-02-25 12:24:23

Not sure what you’re referring to. Can you show us with a link or a screen capture?

JimR · 2019-02-26 00:45:45

I think I got it figured out. The toggle only works when you have a caption that is more than one line of text. The confusing part is why it's there in all of my galleries but in most of the others I looked like TTG's demos, or Ben's, or Rod's galleries, I wasn't finding it. I don't understand how it's only there sometimes.

I can be found in this gallery http://pangolin.barbeephoto.com/galleri … #gallery-2 but the toggle isn't visible. The button is white on a near white background.

Look at the caption with the Inspector. You'll find the button at the far right, under the fancybox-caption tag. The CSS tag is <button class="fancybox-caption-toggle

If you narrow the window enough to cause the caption to wrap more than one line, then clicking that button will cause the caption to collapse to just one line.

The other odd thing, which is how I first noticed it, is if the window is shorter than the image. View this image, http://pangolin.barbeephoto.com/galleri … #gallery-5 then make the window small as if it were a phone. Make the window narrow enough where the caption wraps. Then make it short enough where the caption overlaps the image.

The toggle will collapse the caption to one line. But the caption will still overlap the image.

Then wait a moment, the caption will disappear, revealing the entire image. That's nice, but I don't see this behavior on my iPhone. It happens on the Mac, but not my phone.

On the iPhone, the captions are always overlapping tall images. It cuts off the bottom of images.

Trying to tap on the slide show's play button caused the Safari's UI to appear, cutting off the image. Same with the caption toggle at the bottom.

Playing with it a lot more, I finally discovered if you tap on the image (e.g. center of the screen) you can hide Safari's UI and see the entire image.

Last edited by JimR (2019-02-26 00:51:13)

rod barbee · 2019-02-26 01:42:00

ok. I'm seeing it in the inspector and now on the page itself (hard to see). The css shows that it's transparent background and white (but there's no setting for the toggle in the template)
I had no idea it was even there; I've never seen it before.
But changing the browser to mobile size, I can click where the toggle is and see the caption area collapse and expand.

on my iPhone 6 I'm not really getting the caption overlap (maybe 1px). I can move the image up and down so that it's all the way above the caption area or partially hidden by it.
If I toggle the caption area to make it smaller, then I get no overlap at all.

I can't see it as a problem, it is interesting though.

rod barbee · 2019-02-26 02:25:20

looks like the color is controlled by the page template's button color control.

What I'm finding weird is that the toggle doesn't always show for me. It seems like it takes some time to show up either on the page or in the html (in the inspector). And sometimes it was showing on some images but not other, then it would finally show on all of them. This has been driving me nuts as the first time I looked at this I could find nothing in the inspector to indicate a toggle was there.

well, now I know it's there!

rod barbee · 2019-02-26 02:40:53

Further on this. What seems to trigger the caption toggle to show up is when I decrease the browser width to mobile size. I can start moving through the pictures and it shows up.
When I expand the browser size to something larger than a tablet, the toggle arrows remain in the current picture. As soon as I start moving through the pictures, the toggle disappears. My only conclusion is that the toggle is for mobile devices. I don't see a css media query so my guess is that this is part of the Fancybox code.

The album we were looking at is from my Backlight 1 test site. The behavior I describe above is from my Backlight 2 test site.

The Backlight 1 site isn't as consistent in behavior. With the browser at a mobile size, the toggle is showing up for some images but not for others.

Well, that was a rabbit hole...

JimR · 2019-02-26 12:03:02

rod wrote:

Well, that was a rabbit hole...

My thoughts as well. First I just found it a mystery. Then confusing. Now I think I kinda understand it, but not sure of what use it is.

I was actually trying to figure out how to get images on my iPhone to show full screen. That's still a confusion.

Matthew · 2019-02-27 15:30:06

The button is only supposed to be there when a caption needs it, which is when the caption overflows a single line. Recent changes to Fancybox have required some rewriting in this area; last I looked at it, it was passing my tests. But if it's exhibiting buggy behavior, then it will need another pass. Examples would be helpful.

rod barbee · 2019-02-27 23:51:45

I think it's working as intended. I had no idea it was there and couldn't find it in the inspector at first. And then it was there. And then it wasn't. But I understand how it works now, so what I was seeing is no longer a mystery.

JimR · 2019-03-01 01:58:58

Mat wrote:

button is only supposed to be there when a caption needs it

Thanks Mat, it's making more sense now. Still, I've found something odd on my site that isn't making sense.

One of the mysteries was how dynamically changing the window size was causing the toggle button to behave inconsistently. That's not so much of a problem since that's not a real-world case. Closely the photo and showing it again seems to clear that up. I doubt anyone will ever notice. I just happen to noticed details, and this was confusing me.

But there is one behavior that isn't making sense. Turns out, this also happens for me in BL1.

I understand how the toggle button has a default state of opacity:0. Then when the window is narrow, causing the caption to wrap, the toggle gets an added class of "fancybox-caption-toggleable" which sets the opacity to 1.

The odd thing, the toggle in my window is always set to "fancybox-caption-toggleable". So it's always visible. I must have triggered some interaction causing the toggle to always appear, but I haven't found what's triggering this.

I don't know what code is looking for when to change the toggle button to fancybox-caption-toggleable, and then under what conditions.

You can see the oddity in my gallery. It happens in all of my galleries, but this is a good one to look at. The toggle button is always "fancybox-caption-toggleable"

https://reekes.net/photos/07-places/

Matthew · 2019-03-10 10:58:59

The logic kicks in whenever the caption height is larger than 18px. You've increased the caption size from 0.75rem to 1rem in your custom CSS, which is causing the problem. If you want larger caption text, while preserving the intended behavior, try this as a compromise:

.fancybox-caption-collapsible .fancybox-caption {
  font-size: 0.875rem;
  line-height: 1.125rem;
}

Community @ The Turning Gate

#1 2019-02-25 10:33:53

Caption Toggle

#2 2019-02-25 12:24:23

Re: Caption Toggle

#3 2019-02-26 00:45:45

Re: Caption Toggle

#4 2019-02-26 01:42:00

Re: Caption Toggle

#5 2019-02-26 02:25:20

Re: Caption Toggle

#6 2019-02-26 02:40:53

Re: Caption Toggle

#7 2019-02-26 12:03:02

Re: Caption Toggle

#8 2019-02-27 15:30:06

Re: Caption Toggle

#9 2019-02-27 23:51:45

Re: Caption Toggle

#10 2019-03-01 01:58:58

Re: Caption Toggle

#11 2019-03-10 10:58:59

Re: Caption Toggle

Board footer