1. Home
  2. Customization
  3. Always visible caption, title and keywords panel in lightbox view { beta }

Always visible caption, title and keywords panel in lightbox view { beta }

Intro

In this article I am going to show you how to make the lightbox caption, title and keywords always visible and centered.  This tutorial is in BETA stage, because there are few things that need work so make sure that you visit this article from time to time to get the most up-to-date version of the code.

You can see how this modification works – here

Preparation

You need to change one option in the Lightbox setting to make this work correctly.  Log in to your SmugMug account and then open one of the galleries → click CUSTOMIZE → CONTENT AND DESIGN → on the right side you will see an option called LIGHTBOX – hover your cursor over it and click on the wrench icon.  This will open a new popup window – make sure that the first option AUTO HIDE CONTROLS is turned OFF:

CSS Code

Add a CSS content block to your gallery and then paste this code to it:

.sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
    padding: 10px 16px 12px;
    overflow: visible;
    height: 120px;
    max-width: 100vw;
    margin-right: 0px;
    text-align: center;
}

.sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info > div {
    max-width: 100vw;
}

.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption, .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-keywords, .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title {
    max-width: 100vw !important;
}

.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel {
    height: 120px !important;
    max-height: 120px;
}

.sm-user-ui .sm-lightbox-basic .sm-lightbox-info-expand {
    display:none;
}

.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-ft-right{
    max-height: 50px !important;
}

.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-ft-left{
   max-height: 50px !important;
}

What needs improving

When you hover your cursor over the bottom panel – it will move slightly – this is because the hover event is controlled by JAVASCRIPT and so far I was unable to turn it off completely { work in progress }.

Updated on December 9, 2018

Was this article helpful?

Related Articles

Comments

  1. Hi Tom, been looking to sort the light-box for ages, smugmugs own is a mess looking thing that no one knows how to use.

    Tried A few and found yours, as I have a lot of info within captions, the text at the bottom is covering the icons like comments and buy button.

    I can do a bit of coding, well crash my way through lol, ok so text seems betting to the left with max height around 180px, sadly this isn’t working on phones in landscape, otherwise its not too bad.

    I’m trying to sort where the overflow stops about the buy button or text stops above it which you could then go back to centring the text.

    if there’s a way to keep text clear of icons it be a good system.

    i,ve sent you an image that shows the overflow issues, maybe the text within the captions can be resized a bit, i did that before but can’t find how I did it!!

    PS its working fine if you have hardly any text.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.