Captions lost when clicking large picture in SmugMug style gallery

James Lyall

Can captions be shown in the picture resulting from clicking the large image in a SmugMug style gallery?
Can this be done with CSS, or is this behaviour inherent in the SmugMug design?

James Lyall

Anyone?

Hikin' Mike

@James Lyall said:
Anyone?

You do know that most of the helpers here are in the US and your first post was at 2am and this one was at 7:30am.

For your question, I'm not sure I understand. When you click on the large image you should see your captions for 5 seconds then they are hidden.

James Lyall

@Hikin' Mike said:

You do know that most of the helpers here are in the US and your first post was at 2am and this one was at 7:30am.>

I stand admonished. I intended no offence, I apologise profusely.

Hikin' Mike

I was up early this morning and I didn't get my coffee yet, so I might have worded that better (I can blame that on my Stroke). Sorry if took that the wrong way.

James Lyall

Mike,
As a physician, I fully understand. It was thoughtless of me to forget the 10 hour time difference. Mea culpa!
Having watched this forum for several years, I have noted you to be an outstanding helper with our multitude of problems.

Recapping my current problem: I normally design using Firefox employing the SmugMug gallery style; thumbnails on the left, large image of thumbnail on the right.
Clicking the large image (normally with a caption below) results in an almost full screen image (with the option to go full screen).
My concern is that the caption is never carried over to the "almost" full screen image.
I use Nick Sherlock's CSS Change the lightbox to always show the caption area below the photo, instead of hiding it on hover.
the relevant segments perhaps being:

    /* Don't fade out bottom controls */
    .sm-user-ui .sm-lightbox-basic.sm-lightbox-clean .yui3-widget-ft,
    .sm-user-ui .sm-lightbox-basic.sm-lightbox-has-title .yui3-widget-ft .sm-lightbox-caption {
        opacity: 1;
    }
        /* Show caption all the time */
    .sm-user-ui .sm-lightbox-basic .yui3-widget-ft {
        position: static;
    }

But I think that this CSS references the large image of the thumbnail and not the "almost" full screen image produced by a click of the large image.
I know that this may seem to be a bit nit-picking, but I should like better to understand the workings of the site.
Incidentally, in Firefox, the Slideshow option is available above the large photo, and the captions are shown in the slideshow views.

I shall greatly value your advice here, thank you.
James.

Hikin' Mike

I didn't look through all of your galleries, but the one I picked (http://www.lyall-photos.net/Travel/Argentina/Argentina-2005/), I didn't see any captions....unless I'm missing something. I'm using an old XP machine and I didn't see them on Chrome (my browser) or Firefox.

Jtring

I took a look too. The captions are actually there in the HTML. I didn't dig through the CSS to see why they weren't showing although I did note you had quite a bit of custom code in there.

I did confirm that Nick Sherlock's code for this does work as advertised on my site when I remove all my other CSS. (Since I've liberally borrowed ideas from him, I was curious to see how well he's been updating around all the various SmugMug updates.)

So it would seem you are dealing with one of two situations. You may have an old or altered version of the Sherlock CSS. Or you may have his current lightbox code but there is a conflict with other CSS you've added. I doubt anyone can debug that from a distance. About all I can suggest is to remove all your custom CSS and reintroduce pieces one-functional-group-at-a-time, testing at each step. If you find that X breaks Y, then you either have to decide which to keep or see if you can figure out how to remove the conflict. By the way, if it were me, when re-introducing Nick's code, I'd pull the latest versions from his site rather than expecting I could catch a small update by inspection. I always miss such things.

You were probably hoping for an easier answer, but I fear that's the best I can offer.

James Lyall

Mike, thanks for your response. Take a look at lyall-photos.net/Travel/Argentina/Argentina-2005/Iguazu-from-Argentina/i-qFFpFhS The large image does have a caption, but when clicked it has no caption. Over the weekend, I shall have another careful dig through my CSS, as Jim Ringland suggests, hoping to crack the problem!

James Lyall

To Jtring
Jim, Thank you for taking time to look at my post.
I confirm that I am using Nick's current (freshly pulled) lightbox code.
It is reassuring that you have found that his code works on your site (when stripped of your other CSS).

About all I can suggest is to remove all your custom CSS and reintroduce pieces one-functional-group-at-a-time, testing at each step.

Over the weekend, I shall do exactly as you suggest. There is great satisfaction to be had from solving tricky puzzles!
I hope to report back.

Allen

I disable this and your lightbox caption and tools show.

.sm-user-ui .sm-lightbox-content .yui3-widget-ft {
float:left;
width:100%
}

Actually, disabling just the float exposes everything.

This is just a hint as it looks like maybe something Smug added. You might have added something that overrides this.

@James Lyall said:
Mike, thanks for your response. Take a look at lyall-photos.net/Travel/Argentina/Argentina-2005/Iguazu-from-Argentina/i-qFFpFhS The large image does have a caption, but when clicked it has no caption. Over the weekend, I shall have another careful dig through my CSS, as Jim Ringland suggests, hoping to crack the problem!

James Lyall

Allen, sheer genius!
You have often helped me in the past. I am most grateful; you have saved me many hours of experimentation.
I find it rather interesting that this code is actually a part of Nick Sherlock's remarkable lightbox modification.

James Lyall

@Allen
Allen, you obviously edited your posting after I had responded to you.
Your refreshed post indicates that you use Firefox Developer Tools. I have tried unsuccessfully to use this tool. The best I can do is right-click to choose "Inspect element" but that does not get anywhere near to the display shown in your first screen grab. Could you point me towards a tutorial of some sort? I'm sorry that this seems such an elementary question but would be most grateful to you for your help.

Allen

Here's the Web Developer add-on.
http://chrispederick.com/work/web-developer

The keyboard shortcut for the "style editor" is shift-F7.
The left side panel shows all the pieces of CSS.
Any changes that is made in the CSS is only to what's loaded in memory.
Have to copy/save in text file so changes can be made in Smug later.

James Lyall

Thank you Allen, you are generous with your knowledge.