Lightbox: Increase Description window height

eenixon

I'm evaluating SmugMug. One feature I need is to be able to display both the photo AND the textual description embedded in the photo, simultaneously and side-by-side. The application is a portrait gallery containing my subjects and their biographical info.

I've corresponded with the support folks about the mouse-over description feature in Lightbox. It's nice but it would be nicer if it opened higher into the layout so that the viewer didn't have to do so much scrolling to read the biography. I'm told this is not currently possible and was referred to this forum to see if any of you had confronted and solved the same requirement.

It seems like there is a general limitation in the Customize hierarchy with respect to extracting specific pieces of EXIF and other embedded data from photographs.

Is this the case?

Have any of you found a work around?

Thanks for your help. ...edN

Hikin' Mike

I think the default height is 250px. You can increase this by adding this to your site-wide theme's CSS:

.sm-user-ui .sm-lightbox-basic .yui3-widget-ft.sm-lightbox-has-plugged-node .sm-lightbox-panel, 
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft.sm-lightbox-has-plugged-node .sm-lightbox-info, 
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel:hover, 
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel:hover .sm-lightbox-info {
    min-height: 400px;
    }

eenixon

Thanks Mike. I'm afraid I'll need a bit more help with this. Can you please point me to a tutorial that teaches me about "site-wide" and CSS? My CSS is rusty and out-of-date; I can't intuit where it would go based on my mental picture of HTML, header, etc. and the cascade.

I tried a couple of 'block' things yesterday but the experiments didn't lead to any change in the Lightbox pop-up window.

Is there documentation for all those CSS attributes somewhere?

Thanks again for your help. ...edN

eenixon

Resolved
OK. Found the "Frequently Asked" page here: http://dgrin.com/showthread.php?t=237930

And with a bit of intuitive guessing because the Customize menu hierarchy has changed since this was published, I managed to get this CSS code to work.

Much obliged. ...edN

eenixon

Refinement
I wonder if I didn't turn one detail off by inserting Mike's CSS, i.e., the speed at which the window slides open? While the fully open positioning is great now, the speed at which it happens is instantaneous which can be disconcerting for some folks. A little more 'sliiiide' would be optimal.

Any hints? Thanks.

...edN

Hikin' Mike

eenixon wrote: »

I wonder if I didn't turn one detail off by inserting Mike's CSS, i.e., the speed at which the window slides open? While the fully open positioning is great now, the speed at which it happens is instantaneous which can be disconcerting for some folks. A little more 'sliiiide' would be optimal.

Any hints? Thanks.

...edN

It shouldn't have effected the timing. I would like to see your site if possible. You can change the timing by increasing the timing on the '.5s'. If you edit the '0s' that will delay the "window".

.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel {
    transition: max-height .5s ease 0s;
    }

eenixon

Site Link

Hikin' Mike wrote: »

It shouldn't have effected the timing. I would like to see your site if possible. You can change the timing by increasing the timing on the '.5s'. If you edit the '0s' that will delay the "window".

.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel {
    transition: max-height .5s ease 0s;
    }

Thanks Mike. Here is the link to the Lightbox level of the gallery I've been concerned with:
https://ed-nixon.smugmug.com/Musicians-Portrait-Project/i-dhqL96R/A

I'll assume I can drop this snippet into the same CSS block as the one dealing with the box max-height question?

Any thoughts would be appreciated. And your work is absolutely beautiful! Thanks for persisting in making it.

...edN

Hikin' Mike

eenixon wrote: »

Thanks Mike. Here is the link to the Lightbox level of the gallery I've been concerned with:
https://ed-nixon.smugmug.com/Musicians-Portrait-Project/i-dhqL96R/A

I'll assume I can drop this snippet into the same CSS block as the one dealing with the box max-height question?

Any thoughts would be appreciated. And your work is absolutely beautiful! Thanks for persisting in making it.

...edN

My mistake. It should say 'max-height' , not 'min-height'...

.sm-user-ui .sm-lightbox-basic .yui3-widget-ft.sm-lightbox-has-plugged-node .sm-lightbox-panel,  
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft.sm-lightbox-has-plugged-node .sm-lightbox-info,  
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel:hover,  
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel:hover .sm-lightbox-info {
	max-height: 600px;
	}

Hikin' Mike

eenixon wrote: »

And your work is absolutely beautiful! Thanks for persisting in making it.

...edN

Thank you!

eenixon

Excellent!

Hikin' Mike wrote: »

My mistake. It should say 'max-height' , not 'min-height'...

.sm-user-ui .sm-lightbox-basic .yui3-widget-ft.sm-lightbox-has-plugged-node .sm-lightbox-panel,  
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft.sm-lightbox-has-plugged-node .sm-lightbox-info,  
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel:hover,  
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel:hover .sm-lightbox-info {
    max-height: 600px;
    }

Ironically, I asked myself about that but it was before I found out the proper method for inserting the code. So obviously it made no difference when I switched it up. This change makes all the difference. Thanks again for your help, Mike.