Lightbox customisation

Shinrya · August 6, 2014

Hi chaps!

Hopefully someone can help me with this little tweak (or tell me off for not searching though the current treads)

I'm trying to adjust where my image title and subtitle appear when an image is viewed in the lightbox.
At present they are in the default lower left hand corner, and rather annoyingly are always cut off requiring a mouse hover to bring both lines of text into view. I'm really hoping to fix that.

Current View

What I was hoping to change, was to do away with the mouse hovering and realign the text to the centre just underneath the image, like the mockup below. Does anyone know if this is possible?

bnickeson · August 6, 2014

Sherlock Photography has a good customization for that here: http://www.sherlockphotography.org/Customisations/Lightbox-captions

That will at least get rid of the hover.

This code below can be added to center everything. I can't remember where I got it otherwise I'd give them credit for it. This is all to be added in the theme's CSS by going Customize > Customize Site > Theme > Click the little wrench next to the Active Theme > Advanced Tab > Custom CSS. You can see what this CSS does by clicking on my site in my signature. It's certainly not perfect since the buttons on the right are within the same block as the title and caption for whatever reason, but it'll get you part way there.

/* Centre the caption underneath the photo */
	.sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
		margin-right:0;
	}
	.sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info > div, 
	.sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info > p {
		margin-left:auto;
		margin-right:auto;
	}
/* Code to center text in lightbox */
.sm-lightbox-title {
  text-align: center;
}
.sm-lightbox-caption {
  text-align: center;
}

Shinrya · August 6, 2014

Awesome! That looks like what I need. I'll have a play around.

Thanks!

Allen · August 6, 2014

Shinrya wrote: »

...

Just a heads up, I get this weird thing happening.
Using Firefox v31 and viewing a photo in lightbox, every 4 to 14 seconds the photo flashes.
These are the photos on your homepage under the slideshow. Doesn't happen in IEv11.

Most times it's about 4 sec. and some at 8 & 12. Multiples of 4? Might be synced with slideshow?

Shinrya · August 7, 2014

Thanks for letting me know. I'll download FF and check it out on osx and windows.

Allen · August 7, 2014

See this post for video of this happening in real time.
http://www.dgrin.com/showpost.php?p=1963941&postcount=2

Shinrya · August 7, 2014

It's very odd, but obviously related to the slideshow on the main page. You're right, it only blinks in FF, not chrome or safari or on mobile, so I can live with it.

Lightbox customisation

Comments