Always show captions in the lightbox

2

Comments

  • beardedgitbeardedgit Registered Users Posts: 854 Major grins
    edited December 8, 2013
    OK, thanks for that thumb.gif
    Yippee ki-yay, footer-muckers!
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited December 12, 2013
    It turns out that the "add a comment" window got broken by the lightbox customisation. I've updated the code to fix it, if you've already installed it then just add this CSS to the bottom:
    /* Make sure that doesn't end up overlaying floating dialogs like the comment box */
    	.sm-lightbox + .yui3-widget-modal {
    		z-index:3 !important;
    	}
    
  • DistantVoiceDistantVoice Registered Users Posts: 4 Beginner grinner
    edited December 15, 2013
    No text bubble with caption?
    Lamah wrote: »

    You can see an example gallery which has had this applied here, I'd love to hear your thoughts on how this looks and if it works for you!

    http://www.sherlockphotography.org/Customisations/Lightbox-captions/Customised-lightbox/i-TthBbZR/A

    Lamah, I have visited this gallery and I have noticed that the text bubbles with captions do not appear there (and the nice captions at the bottom do appear if I hover on a photo). Could you be so kind and explain me how have you achieved this. I thought that turning off the text bubbles is impossible so I have turned off the nice bottom captions but now I see that it is possible somehow.
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited December 15, 2013
    Ahh, sorry to tease you with that one. That particular customisation requires JavaScript, so can't be replicated on other SmugMug sites (on my site, I can only customise JavaScript through the blackest of black magic).

    I'm super surprised that SmugMug haven't created a solution to turning those off already, since they're useless in almost every situation due to already adjacent captions and are quite unsightly.

    You could likely get that customisation added to your site if you were a Fastline customisation customer, as they have permission to install JS on SmugMug sites (though I don't know to what extent they can customise this per-customer, or what they would charge). Give them a bell and ask for a quote if you like.
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited January 29, 2014
    This customisation has now been updated to add support for videos in the lightbox (previously, the video controls were unclickable). Grab the newest version of the main CSS code from the link in the first post:

    http://www.sherlockphotography.org/Customisations/Lightbox-captions

    I've also updated the code in the "Tweak left and right navigation buttons" section, so if you're using that tweak then you should update. The new update avoids tweaking the navigation buttons if there is a video player (since that would otherwise cause the buttons to lie on top of the video player controls).

    I've updated the example gallery to demonstrate the new code. Try opening this image in the lightbox, and then advancing to the next image, which is a video:

    http://www.sherlockphotography.org/Customisations/Lightbox-captions/Customised-lightbox/i-n8z2pJR/A
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited February 10, 2014
    That update in my last post also fixed a problem for another user where the Lightbox controls (including the close button) stopped working, so if you are having that problem then you should update.
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited February 11, 2014
    Lamah wrote: »
    That update in my last post also fixed a problem for another user where the Lightbox controls (including the close button) stopped working, so if you are having that problem then you should update.

    The "always show lightbox controls" wasn't showing the caption and tools icons so I modified it slightly to include all lightbox items (caption and tools). Perhaps other people would want this simple addition too?
    /* Don't fade out the left arrow, right arrow or close button of the Lightbox.
       Also don't fade the caption and info bar */
    .sm-user-ui .sm-lightbox-basic.sm-lightbox-clean .yui3-widget-hd[COLOR="Blue"], 
    .sm-user-ui .sm-lightbox-basic.sm-lightbox-clean .yui3-widget-ft[/COLOR] {
      opacity: 1 !important;
    }
    

    Also, I tried to implement the "click anywhere for left/right nav", which worked, although if I didn't click on the arrow, a weird blue outline came across the entire area. I'm using chrome in windows 7. It's like the blue outline to show you something is selected, although normally i don't see that on websites.

    Looks kinda like this (I was too lazy to go add the code back to my site to take a screenshot):
    weird_outline.jpg
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited March 14, 2014
    Hi all,

    SmugMug's updates to the Lightbox today require you to make some changes to the CSS for this tweak. The best thing to do would be to go to this page and reinstall the CSS for the tweak completely:

    http://www.sherlockphotography.org/Customisations/Lightbox-captions

    The code that has changed includes the main CSS code, the tweak to reserve more height for the caption area, the tweak to centre the caption area, the tweak to allow the caption to fill the entire window width, and the tweaks for formatting the title and caption.
  • rich56krich56k Registered Users Posts: 547 Major grins
    edited March 25, 2014
    Lamah wrote: »
    Hi all,

    SmugMug's updates to the Lightbox today require you to make some changes to the CSS for this tweak. The best thing to do would be to go to this page and reinstall the CSS for the tweak completely:

    http://www.sherlockphotography.org/Customisations/Lightbox-captions

    The code that has changed includes the main CSS code, the tweak to reserve more height for the caption area, the tweak to centre the caption area, the tweak to allow the caption to fill the entire window width, and the tweaks for formatting the title and caption.

    For informational purposes I'd like to mention I had to increase from the shown starting point of: 90px/-90px up to 215px/-215px to get my custom Lamah's PayPal button box to show without scrolling since these last changes made at SmugMugs end...

    Here it is in action:
    http://www.hooliganunderground.com/NMRA/NMRA-16th-ANNUAL-SPRING-1/i-gC64q53/A

    Thanks again Lamah for keeping us updated and for your great code!!

    rich56k

    From Lamah's site:
    Tweaks
    "Reserve more height for the caption area"

    /* Reserve more room for the lightbox caption */
    .sm-user-ui .sm-lightbox .sm-lightbox-content {
    padding-bottom: 90px;
    margin-bottom: -90px;
    }
    http://HooliganUnderground.com
    Member: ASMP; EP; NPPA; CPS
  • RJMuggerRJMugger Registered Users Posts: 13 Big grins
    edited April 2, 2014
    Lamah wrote: »
    Hi all,

    SmugMug's updates to the Lightbox today require you to make some changes to the CSS for this tweak. The best thing to do would be to go to this page and reinstall the CSS for the tweak completely:

    http://www.sherlockphotography.org/Customisations/Lightbox-captions

    The code that has changed includes the main CSS code, the tweak to reserve more height for the caption area, the tweak to centre the caption area, the tweak to allow the caption to fill the entire window width, and the tweaks for formatting the title and caption.

    Lamah, last November I used your code at http://www.sherlockphotography.org/Customisations/Lightbox-captions to customize my Lightbox captions/titles. It worked very well. Thank you. All my captions/titles were nicely centered under the Lightbox photo.

    A week ago I noticed that my captions/titles were no longer centered under the Lightbox photo. Then I noticed your March 14 post which said that SmugMug made some changes. So I reinstalled your CSS tweaks completely from the above web page. I did everything in the Installation box, plus (mostly from that page):
    /* Don't fade out the left arrow, right arrow or close button of the Lightbox */
    /* Centre the caption underneath the photo */
    /* Formatting for the caption and title in Lightbox */
    /* Remove filled in grey triangle at bottom left corner of lightbox (for full screen mode) */

    Now my captions/titles in the Lightbox are still not centered. They all start about 1/3 from the left edge, for all photos. My longer captions/titles now take up 2 lines, whereas they previously fit onto one line. See for example http://madaras.smugmug.com/Travel/2011/Alencon-Paris-Geneva-Sept-2011/, especially the 2nd photo (“Dinosaur footprints...”); that title used to fit on one line.

    Could you please help me get my caption/titles centered and all on one line again?

    Also, it seems that now a “keyword” is also displayed in the Lightbox, under the caption/title. I don’t want any keywords displayed there. How can I remove all of them?

    Thanks for your help. Ron
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited April 3, 2014
    Hi Ron,

    Try this CSS to centre the caption instead:
    /* Centre the caption underneath the photo */
    	.sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
    		margin-right:240px;
    		margin-left:240px;
    	}
    	.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 {
    		text-align:center;
    		max-width:none;
    	}
    

    You can remove those keywords with:
    .sm-lightbox-keywords {
    	display:none;
    }
    
  • RJMuggerRJMugger Registered Users Posts: 13 Big grins
    edited April 3, 2014
    Lamah wrote: »
    Hi Ron,

    Try this CSS to centre the caption instead:
    /* Centre the caption underneath the photo */
        .sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
            margin-right:240px;
            margin-left:240px;
        }
        .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 {
            text-align:center;
            max-width:none;
        }
    
    You can remove those keywords with:
    .sm-lightbox-keywords {
        display:none;
    }
    
    Lamah, Thank you for the fixes. The keyword removal works.

    The new CSS code to center the caption works for captions, but it doesn’t work for titles. SmugMug has a field for titles, and a different field for captions. It seems that some of my galleries have titles and some have captions (I guess from the way they were uploaded). The gallery I sent you yesterday has captions, and it works perfectly with the new CSS code. This gallery, http://madaras.smugmug.com/Travel/2010/Blue-Danube-River-Cruise-08-10/ has titles, and the new CSS code doesn’t change things much (titles are not centered, and are more than one line).

    Can the code by tweaked so that both captions and titles are centered and mostly on one line? Thanks! Ron
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited April 3, 2014
    Ah yup, try this:
    /* Centre the caption underneath the photo */
        .sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
            margin-right:240px;
            margin-left:240px;
        }
        .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,
    	.sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info h4 {
            text-align:center;
            max-width:none;
        }
    
  • RJMuggerRJMugger Registered Users Posts: 13 Big grins
    edited April 3, 2014
    Lamah wrote: »
    Ah yup, try this:
    /* Centre the caption underneath the photo */
        .sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
            margin-right:240px;
            margin-left:240px;
        }
        .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,
        .sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info h4 {
            text-align:center;
            max-width:none;
        }
    
    Thanks very much! It works perfectly. I again appreciate all of your help. Ron
  • RJMuggerRJMugger Registered Users Posts: 13 Big grins
    edited April 4, 2014
    Lamah wrote: »
    Ah yup, try this:
    /* Centre the caption underneath the photo */
        .sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
            margin-right:240px;
            margin-left:240px;
        }
        .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,
        .sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info h4 {
            text-align:center;
            max-width:none;
        }
    
    Thanks very much! It works perfectly.

    I do have one more thing to fix.

    In the Lightbox I see a vertical scrollbar on the right side, that goes about 2/3 of the way down the side. (You can see it using the SmugMug URL’s that I previously sent.) All of my captions/titles are one line, so I don’t need the scrollbar. I don’t want people to use a scrollbar in the Lightbox, as it just cuts off the photo.

    How can I remove the vertical scrollbar in the Lightbox?

    Thanks. Ron
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited April 5, 2014
    That's curious, I'm not sure why your page triggers that to happen. Add this CSS:
    /* Prevent page body from contributing to page scrollbar height - extra strength */
    	body.sm-page-gallery.sm-noscroll #sm-page-content * {
    		height:50px !important;
    		overflow:hidden !important;
    	
    }
    

    You'll also want to reserve a little more space for your titles to ensure you don't end up with a scrollbar, by adding this CSS:
    /* Reserve more room for the lightbox caption */
    	.sm-user-ui .sm-lightbox .sm-lightbox-content {
    		padding-bottom: 55px;
    		margin-bottom: -55px;
    	}
    
  • RJMuggerRJMugger Registered Users Posts: 13 Big grins
    edited April 5, 2014
    Lamah wrote: »
    That's curious, I'm not sure why your page triggers that to happen. Add this CSS:
    /* Prevent page body from contributing to page scrollbar height - extra strength */
        body.sm-page-gallery.sm-noscroll #sm-page-content * {
            height:50px !important;
            overflow:hidden !important;
        
    }
    
    You'll also want to reserve a little more space for your titles to ensure you don't end up with a scrollbar, by adding this CSS:
    /* Reserve more room for the lightbox caption */
        .sm-user-ui .sm-lightbox .sm-lightbox-content {
            padding-bottom: 55px;
            margin-bottom: -55px;
        }
    
    Thanks very much Lamah. Both fixes work perfectly. I really appreciate your help. Ron
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited May 7, 2014
    I've now updated the main CSS code to make it compatible with SmugMug's latest Lightbox tweaks. If you've got this installed at the moment, please grab the main CSS section from my website again:

    http://www.sherlockphotography.org/Customisations/Lightbox-captions

    These are the changes from the last version:

    http://www.mergely.com/w8m68Jk6/
  • rich56krich56k Registered Users Posts: 547 Major grins
    edited May 7, 2014
    Lamah wrote: »
    I've now updated the main CSS code to make it compatible with SmugMug's latest Lightbox tweaks. If you've got this installed at the moment, please grab the main CSS section from my website again:

    http://www.sherlockphotography.org/Customisations/Lightbox-captions

    These are the changes from the last version:

    http://www.mergely.com/w8m68Jk6/

    Once again you've come to the rescue!! deal.gif

    Works great again. :D

    Thanks Lamah! thumb.gif
    http://HooliganUnderground.com
    Member: ASMP; EP; NPPA; CPS
  • JSS44JSS44 Registered Users Posts: 46 Big grins
    edited November 17, 2014
    I've now updated the main CSS code to make it compatible with SmugMug's latest Lightbox tweaks. If you've got this installed at the moment, please grab the main CSS section from my website again:

    http://www.sherlockphotography.org/Customisations/Lightbox-captions

    These are the changes from the last version:

    http://www.mergely.com/w8m68Jk6/

    Hello. I'm not sure if you see replies to this old thread but I thought I'd try going directly to the source. A few months ago I found your fantastic lightbox customizations for captions and have been using them happily ever since. But now the with new add to cart flow, when I click on the Add to Cart button in my lightbox, the photo image disappears and the screen basically freezes. If I then use the browser back button (in Safari, Chrome and Firefox) the new cart window shows up. This is sort of a disaster since anyone trying to purchase a print this way is likely giving up out of confusion. Any ideas for a remedy? I would so greatly appreciate the help.

    Thanks,
    Jody
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited November 17, 2014
    JSS44 wrote: »
    Hello. I'm not sure if you see replies to this old thread but I thought I'd try going directly to the source. A few months ago I found your fantastic lightbox customizations for captions and have been using them happily ever since. But now the with new add to cart flow, when I click on the Add to Cart button in my lightbox, the photo image disappears and the screen basically freezes. If I then use the browser back button (in Safari, Chrome and Firefox) the new cart window shows up. This is sort of a disaster since anyone trying to purchase a print this way is likely giving up out of confusion. Any ideas for a remedy? I would so greatly appreciate the help.

    Thanks,
    Jody

    Hi Jody, we'll have to pass this one on to lamah to correct but if you add the following code it will act as a temporary (but not the best) fix until he can offer a better solution:
    /* Temporary fix to make the add-to-cart box visible */
    .sm-panel.sm-addtocart-panel {
  
      position: fixed !important;
    
  top: 100px !important;

      left: 100px !important;
    }
    

    You'll want to make note of it so you can delete it when we get an update from lamah.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • JSS44JSS44 Registered Users Posts: 46 Big grins
    edited November 17, 2014
    Thank you! This is a huge help.
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited November 26, 2014
    Thanks leftquark!

    The fix I would suggest would be to add this CSS instead:
    /* Fix the positioning of the "buy now" dialog */
    	.sm-user-ui .sm-lightbox + div {
    		position: absolute;
    		top: 0;
    		left: 0;
    		z-index: 2;
    	}
    

    Everybody who sells photos needs to update their installation to add this to their CSS! I've added it to my site now.
  • JSS44JSS44 Registered Users Posts: 46 Big grins
    edited November 26, 2014
    Thanks leftquark!

    The fix I would suggest would be to add this CSS instead:
    /* Fix the positioning of the "buy now" dialog */
        .sm-user-ui .sm-lightbox + div {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
        }
    
    Everybody who sells photos needs to update their installation to add this to their CSS! I've added it to my site now.

    I really appreciate it, thanks so much! --Jody
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited March 25, 2015
    SmugMug's recent updates mean that the caption no longer appeared when using this customisation. I've fixed that in the CSS code, so please reinstall the main CSS if you are currently using it:

    http://www.sherlockphotography.org/Customisations/Lightbox-captions

    (I've now added a "last updated" date to the code so in future you can tell if you have the latest version :))
  • JSS44JSS44 Registered Users Posts: 46 Big grins
    edited March 25, 2015
    SmugMug's recent updates mean that the caption no longer appeared when using this customisation. I've fixed that in the CSS code, so please reinstall the main CSS if you are currently using it:

    http://www.sherlockphotography.org/Customisations/Lightbox-captions

    (I've now added a "last updated" date to the code so in future you can tell if you have the latest version :))

    Thank you once again for doing this. I've updated with your new code but things are working for me slightly differently than before:

    Previously, everything was fitting on one screen without having to scroll up or down. Now, even on a large monitor, the caption isn't totally visible without scrolling down. Is there a way to fix this? I'd like to reduce the white space between the bottom of the image and the caption as much as possible. And then, I'd like the image size to decrease to the next size down as needed, to keep the entire caption and image in one screen view. (I hope that makes sense.)

    Thanks so much if you can help.

    Jody
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited March 26, 2015
    You might have previously installed the "Reserve more height for the caption area" tweak from the customisation page, and inadvertently overwritten that code when updating your main lightbox CSS code. Try adding it back in and tweaking the "90px" value as required to reserve more or less height.
  • JSS44JSS44 Registered Users Posts: 46 Big grins
    edited March 26, 2015
    You might have previously installed the "Reserve more height for the caption area" tweak from the customisation page, and inadvertently overwritten that code when updating your main lightbox CSS code. Try adding it back in and tweaking the "90px" value as required to reserve more or less height.

    That fixed it, thank you. I'll try to remember for future updates...
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited March 30, 2015
    I've tried your code to center the caption for my lightbox:
    /* 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;
        }
    

    It did nothing... ne_nau.gif

    http://www.brandolinoimaging.com/Image-Galleries/My-Portfolio/Published-Images/Published-Images-1/i-Vhwkt6t/A


    I tried your code to always show caption and made the tweak so the image did not fill the screen, and I got my border filling the screen. It seems a spacer gif is what is getting the border and that gif goes full screen even thought the image itself does not.
    /**
     * Change the lightbox to always show the caption area below the photo, instead of hiding it on hover.
     *
     * Updated 2015-03-26
     *
     * By Sherlock Photography http://www.sherlockphotography.org/
     */
        .sm-user-ui .sm-lightbox {
            height: auto !important;
        }
        
        body.sm-page-node.sm-noscroll .sm-lightbox {
            position: static;
        }
        
        .sm-user-ui .sm-lightbox .sm-lightbox-image:not(.sm-video) {
            position: relative !important;
            display: block;
        }
        
        /* 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;
        }
            
        /* Overlay panels become fixed to the image area */
        .sm-user-ui .sm-lightbox-content {
            position: relative;
        }
        .sm-user-ui .sm-lightbox-content .yui3-widget-hd {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            
            /* 
                We don't want to create a new stacking context, as we want the tools container to lie underneath the image,
                while the arrows themselves sit on top
            */
            z-index: auto;
        }
        .sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools,
        .sm-user-ui .sm-lightbox .sm-lightbox-nav {
            z-index: 2;
        }
        
        /* Previously display:fixed navigation tools stay with the image, as long as it's not bigger than the screen with Image Sizes */
        .sm-user-ui .sm-lightbox:not(.sm-lightbox-scrollable) .yui3-widget-hd .sm-lightbox-tools,
        .sm-user-ui .sm-lightbox:not(.sm-lightbox-scrollable) .sm-lightbox-nav {
            position: absolute;
        }
        
        .sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-ft-center {
            cursor: inherit;
        }
    
        /* Remove sliding animations for caption area */
        .sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-ft-center {
            -moz-transition: none;
            -webkit-transition: none;
            transition: none;
        }   
        
        /* Position bottom panel components */
        .sm-user-ui .sm-lightbox .yui3-widget-ft .sm-lightbox-panel {
            top: 0;
            bottom: auto;
        }
        
        .sm-user-ui .sm-lightbox .yui3-widget-ft .sm-lightbox-panel {
            background-color: transparent !important;
        }
        
        /* Remove scrolling behaviour from caption area */
        .sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel,
        .sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel:hover .sm-lightbox-info,
        .sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
            max-height:none;    
        }
        .sm-user-ui .sm-lightbox-basic .sm-lightbox-info-expand {
            display:none;
        }
        
        /* Show scroll bars on the entire page */   
        body.sm-page-node.sm-noscroll {
            overflow-y: auto; /* Allow vertical scrollbar on page so we can see the caption */
            overflow-x: auto; /* Allow horizontal scrollbar for Image Sizes menu if the image is wider than screen */
        }
        /* But if we enter full-screen slideshow mode, get rid of them: */
        html:-moz-full-screen body.sm-page-node.sm-noscroll {
            overflow-x: visible;
            overflow-y: visible;
        }
        :-webkit-full-screen body.sm-page-node.sm-noscroll, body.sm-page-node.sm-noscroll:-webkit-full-screen {
            overflow-x: visible;
            overflow-y: visible;
        }
        html:-ms-fullscreen body.sm-page-node.sm-noscroll {
            overflow-x: visible;
            overflow-y: visible;
        }
        html:fullscreen body.sm-page-node.sm-noscroll {
            overflow-x: visible;
            overflow-y: visible;
        }   
        
        /* Remove scrollbars on just the image area if SM decides to add them */
        .sm-user-ui .sm-lightbox-scrollable {
            overflow:visible;
        }
        /* Stop SM from messing with the footer on scroll */
        .sm-user-ui .sm-lightbox-scrollable .yui3-widget-ft {
            bottom:auto;
            left:0;
            right:0;
        }
        
        /* Prevent page body from contributing to page scrollbar height */
        body.sm-page-node.sm-noscroll #sm-page-content {
            height:50px;
            overflow:hidden;
        }
            
        /* Scale the main image to conform to the body area */
        .sm-user-ui .sm-lightbox:not(.sm-lightbox-scrollable) .sm-lightbox-image {
            max-height:100%;    
        }
        .sm-user-ui .sm-lightbox:not(.sm-lightbox-scrollable) .sm-lightbox-image.sm-video > * {
            /* Video tag itself */
            max-height:100%;
        }
        .sm-user-ui .sm-lightbox:not(.sm-lightbox-scrollable) .sm-lightbox-image:not(.sm-video) {
            width:auto !important;
            height:auto !important;
    
            max-width:100%;
    
            top:50%;
            -webkit-transform:translateY(-50%);
            -moz-transform:translateY(-50%);
            -ms-transform:translateY(-50%);
            -o-transform:translateY(-50%);
            transform:translateY(-50%);
        }
        
        /* If main image uses right-click protection, it's a background-image, so we have to use a different approach: */
        .sm-user-ui .sm-lightbox .sm-lightbox-image[src="/img/spacer.gif"] {
            top:0;
            -webkit-transform:none;
            -moz-transform:none;
            -ms-transform:none;
            -o-transform:none;
            transform:none;
        }
        /* If image is smaller than its container by using the image-sizes menu, or auto-sized, stretch it to fill the window */
        .sm-user-ui .sm-lightbox:not(.sm-lightbox-scrollable) .sm-lightbox-image[src="/img/spacer.gif"] {
           /* background-size: contain !important;  Scale photo to fill the window */
            background-position: center center;
    
            width:100% !important;
            height:100% !important;
        }
        
        /* Set the height of the body area so that the bottom bar will be visible without scrolling */
        .sm-lightbox .sm-lightbox-content { height: 390px; }
        @media only screen and (min-height: 400px) { .sm-lightbox .sm-lightbox-content { height: 400px; } }
        @media only screen and (min-height: 410px) { .sm-lightbox .sm-lightbox-content { height: 410px; } }
        @media only screen and (min-height: 420px) { .sm-lightbox .sm-lightbox-content { height: 420px; } }
        @media only screen and (min-height: 430px) { .sm-lightbox .sm-lightbox-content { height: 430px; } }
        @media only screen and (min-height: 440px) { .sm-lightbox .sm-lightbox-content { height: 440px; } }
        @media only screen and (min-height: 450px) { .sm-lightbox .sm-lightbox-content { height: 450px; } }
        @media only screen and (min-height: 460px) { .sm-lightbox .sm-lightbox-content { height: 460px; } }
        @media only screen and (min-height: 470px) { .sm-lightbox .sm-lightbox-content { height: 470px; } }
        @media only screen and (min-height: 480px) { .sm-lightbox .sm-lightbox-content { height: 480px; } }
        @media only screen and (min-height: 490px) { .sm-lightbox .sm-lightbox-content { height: 490px; } }
        @media only screen and (min-height: 500px) { .sm-lightbox .sm-lightbox-content { height: 500px; } }
        @media only screen and (min-height: 510px) { .sm-lightbox .sm-lightbox-content { height: 510px; } }
        @media only screen and (min-height: 520px) { .sm-lightbox .sm-lightbox-content { height: 520px; } }
        @media only screen and (min-height: 530px) { .sm-lightbox .sm-lightbox-content { height: 530px; } }
        @media only screen and (min-height: 540px) { .sm-lightbox .sm-lightbox-content { height: 540px; } }
        @media only screen and (min-height: 550px) { .sm-lightbox .sm-lightbox-content { height: 550px; } }
        @media only screen and (min-height: 560px) { .sm-lightbox .sm-lightbox-content { height: 560px; } }
        @media only screen and (min-height: 570px) { .sm-lightbox .sm-lightbox-content { height: 570px; } }
        @media only screen and (min-height: 580px) { .sm-lightbox .sm-lightbox-content { height: 580px; } }
        @media only screen and (min-height: 590px) { .sm-lightbox .sm-lightbox-content { height: 590px; } }
        @media only screen and (min-height: 600px) { .sm-lightbox .sm-lightbox-content { height: 600px; } }
        @media only screen and (min-height: 610px) { .sm-lightbox .sm-lightbox-content { height: 610px; } }
        @media only screen and (min-height: 620px) { .sm-lightbox .sm-lightbox-content { height: 620px; } }
        @media only screen and (min-height: 630px) { .sm-lightbox .sm-lightbox-content { height: 630px; } }
        @media only screen and (min-height: 640px) { .sm-lightbox .sm-lightbox-content { height: 640px; } }
        @media only screen and (min-height: 650px) { .sm-lightbox .sm-lightbox-content { height: 650px; } }
        @media only screen and (min-height: 660px) { .sm-lightbox .sm-lightbox-content { height: 660px; } }
        @media only screen and (min-height: 670px) { .sm-lightbox .sm-lightbox-content { height: 670px; } }
        @media only screen and (min-height: 680px) { .sm-lightbox .sm-lightbox-content { height: 680px; } }
        @media only screen and (min-height: 690px) { .sm-lightbox .sm-lightbox-content { height: 690px; } }
        @media only screen and (min-height: 700px) { .sm-lightbox .sm-lightbox-content { height: 700px; } }
        @media only screen and (min-height: 710px) { .sm-lightbox .sm-lightbox-content { height: 710px; } }
        @media only screen and (min-height: 720px) { .sm-lightbox .sm-lightbox-content { height: 720px; } }
        @media only screen and (min-height: 730px) { .sm-lightbox .sm-lightbox-content { height: 730px; } }
        @media only screen and (min-height: 740px) { .sm-lightbox .sm-lightbox-content { height: 740px; } }
        @media only screen and (min-height: 750px) { .sm-lightbox .sm-lightbox-content { height: 750px; } }
        @media only screen and (min-height: 760px) { .sm-lightbox .sm-lightbox-content { height: 760px; } }
        @media only screen and (min-height: 770px) { .sm-lightbox .sm-lightbox-content { height: 770px; } }
        @media only screen and (min-height: 780px) { .sm-lightbox .sm-lightbox-content { height: 780px; } }
        @media only screen and (min-height: 790px) { .sm-lightbox .sm-lightbox-content { height: 790px; } }
        @media only screen and (min-height: 800px) { .sm-lightbox .sm-lightbox-content { height: 800px; } }
        @media only screen and (min-height: 810px) { .sm-lightbox .sm-lightbox-content { height: 810px; } }
        @media only screen and (min-height: 820px) { .sm-lightbox .sm-lightbox-content { height: 820px; } }
        @media only screen and (min-height: 830px) { .sm-lightbox .sm-lightbox-content { height: 830px; } }
        @media only screen and (min-height: 840px) { .sm-lightbox .sm-lightbox-content { height: 840px; } }
        @media only screen and (min-height: 850px) { .sm-lightbox .sm-lightbox-content { height: 850px; } }
        @media only screen and (min-height: 860px) { .sm-lightbox .sm-lightbox-content { height: 860px; } }
        @media only screen and (min-height: 870px) { .sm-lightbox .sm-lightbox-content { height: 870px; } }
        @media only screen and (min-height: 880px) { .sm-lightbox .sm-lightbox-content { height: 880px; } }
        @media only screen and (min-height: 890px) { .sm-lightbox .sm-lightbox-content { height: 890px; } }
        @media only screen and (min-height: 900px) { .sm-lightbox .sm-lightbox-content { height: 900px; } }
        @media only screen and (min-height: 910px) { .sm-lightbox .sm-lightbox-content { height: 910px; } }
        @media only screen and (min-height: 920px) { .sm-lightbox .sm-lightbox-content { height: 920px; } }
        @media only screen and (min-height: 930px) { .sm-lightbox .sm-lightbox-content { height: 930px; } }
        @media only screen and (min-height: 940px) { .sm-lightbox .sm-lightbox-content { height: 940px; } }
        @media only screen and (min-height: 950px) { .sm-lightbox .sm-lightbox-content { height: 950px; } }
        @media only screen and (min-height: 960px) { .sm-lightbox .sm-lightbox-content { height: 960px; } }
        @media only screen and (min-height: 970px) { .sm-lightbox .sm-lightbox-content { height: 970px; } }
        @media only screen and (min-height: 980px) { .sm-lightbox .sm-lightbox-content { height: 980px; } }
        @media only screen and (min-height: 990px) { .sm-lightbox .sm-lightbox-content { height: 990px; } }
        @media only screen and (min-height: 1000px) { .sm-lightbox .sm-lightbox-content { height: 1000px; } }
        @media only screen and (min-height: 1010px) { .sm-lightbox .sm-lightbox-content { height: 1010px; } }
        @media only screen and (min-height: 1020px) { .sm-lightbox .sm-lightbox-content { height: 1020px; } }
        @media only screen and (min-height: 1030px) { .sm-lightbox .sm-lightbox-content { height: 1030px; } }
        @media only screen and (min-height: 1040px) { .sm-lightbox .sm-lightbox-content { height: 1040px; } }
        @media only screen and (min-height: 1050px) { .sm-lightbox .sm-lightbox-content { height: 1050px; } }
        @media only screen and (min-height: 1060px) { .sm-lightbox .sm-lightbox-content { height: 1060px; } }
        @media only screen and (min-height: 1070px) { .sm-lightbox .sm-lightbox-content { height: 1070px; } }
        @media only screen and (min-height: 1080px) { .sm-lightbox .sm-lightbox-content { height: 1080px; } }
        @media only screen and (min-height: 1090px) { .sm-lightbox .sm-lightbox-content { height: 1090px; } }
        @media only screen and (min-height: 1100px) { .sm-lightbox .sm-lightbox-content { height: 1100px; } }
        @media only screen and (min-height: 1110px) { .sm-lightbox .sm-lightbox-content { height: 1110px; } }
        @media only screen and (min-height: 1120px) { .sm-lightbox .sm-lightbox-content { height: 1120px; } }
        @media only screen and (min-height: 1130px) { .sm-lightbox .sm-lightbox-content { height: 1130px; } }
        @media only screen and (min-height: 1140px) { .sm-lightbox .sm-lightbox-content { height: 1140px; } }
        @media only screen and (min-height: 1150px) { .sm-lightbox .sm-lightbox-content { height: 1150px; } }
        @media only screen and (min-height: 1160px) { .sm-lightbox .sm-lightbox-content { height: 1160px; } }
        @media only screen and (min-height: 1170px) { .sm-lightbox .sm-lightbox-content { height: 1170px; } }
        @media only screen and (min-height: 1180px) { .sm-lightbox .sm-lightbox-content { height: 1180px; } }
        @media only screen and (min-height: 1190px) { .sm-lightbox .sm-lightbox-content { height: 1190px; } }
        @media only screen and (min-height: 1200px) { .sm-lightbox .sm-lightbox-content { height: 1200px; } }
        @media only screen and (min-height: 1210px) { .sm-lightbox .sm-lightbox-content { height: 1210px; } }
        @media only screen and (min-height: 1220px) { .sm-lightbox .sm-lightbox-content { height: 1220px; } }
        @media only screen and (min-height: 1230px) { .sm-lightbox .sm-lightbox-content { height: 1230px; } }
        @media only screen and (min-height: 1240px) { .sm-lightbox .sm-lightbox-content { height: 1240px; } }
        @media only screen and (min-height: 1250px) { .sm-lightbox .sm-lightbox-content { height: 1250px; } }
        @media only screen and (min-height: 1260px) { .sm-lightbox .sm-lightbox-content { height: 1260px; } }
        @media only screen and (min-height: 1270px) { .sm-lightbox .sm-lightbox-content { height: 1270px; } }
        @media only screen and (min-height: 1280px) { .sm-lightbox .sm-lightbox-content { height: 1280px; } }
        @media only screen and (min-height: 1290px) { .sm-lightbox .sm-lightbox-content { height: 1290px; } }
        @media only screen and (min-height: 1300px) { .sm-lightbox .sm-lightbox-content { height: 1300px; } }
        
        .sm-user-ui .sm-lightbox .yui3-widget-bd {
            height:100%;
        }
    
        /* If a size larger than the window is chosen with the Image Sizes menu, allow the content area to take its natural size */
        .sm-user-ui .sm-lightbox.sm-lightbox-scrollable .sm-lightbox-content,
        .sm-user-ui .sm-lightbox.sm-lightbox-scrollable .yui3-widget-bd {
            height:auto;
        }   
    
        /* This controls how much space is reserved on the screen for the bottom bar */
        .sm-user-ui .sm-lightbox .sm-lightbox-content {
            padding-bottom: 45px;
            margin-bottom: -45px;
            
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        /* Since that causes the image to overlap the footer, make the footer sit on top: */
        .sm-user-ui .sm-lightbox .yui3-widget-ft {
            position: relative;
        }
        
        /* Fix the positioning of the "buy now" dialog */
        .sm-user-ui .sm-lightbox + div {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
        }
    

    I've removed the code since it makes the page look very bad... tried playing with the FF WD tools but could not get it sorted out.
    Even removed all my other CSS tweaks using the WD tool...

    Help!
  • RJMuggerRJMugger Registered Users Posts: 13 Big grins
    edited April 1, 2015
    Ah yup, try this:
    /* Centre the caption underneath the photo */
        .sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
            margin-right:240px;
            margin-left:240px;
        }
        .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,
        .sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info h4 {
            text-align:center;
            max-width:none;
        }
    

    Lamar, the titles and captions under my Lightbox photos recently disappeared, so I just updated my CSS code with your 2015-03-26 version of your Lightbox Customization code. I now can see the titles and captions. But the titles/captions now take 2 lines instead of 1 line, and are not centered. See: http://madaras.smugmug.com/Travel/2015/Easter-Island-Patagonia-0115/i-h9SxJBR/A

    This occurred last April when I updated my CSS with your new Lightbox Customization code, and I fixed it with the code you posted on Apr-03-2014, 04:48 PM for BOTH titles and captions:
    /* Centre the caption underneath the photo 4/3/14 PM */
    .sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
    margin-right:240px;
    margin-left:240px;
    }
    .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,
    .sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info h4 {
    text-align:center;
    max-width:none;
    }

    But this doesn’t seem to work anymore. Could you please tell me how to get both my titles and captions on one line, and have them mostly centered on the photo?

    Thanks for your help. Ron
Sign In or Register to comment.