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;
}
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.
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.
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:
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:
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.
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
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:
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.
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:
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...
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:
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.
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?
/* 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
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?
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:
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:
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:
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.
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.
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:
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:
(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.)
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.
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...
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...
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?
Comments
/* Make sure that doesn't end up overlaying floating dialogs like the comment box */ .sm-lightbox + .yui3-widget-modal { z-index:3 !important; }Please check out my gallery of customisations for the New SmugMug, more to come!
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.
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.
Please check out my gallery of customisations for the New SmugMug, more to come!
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
Please check out my gallery of customisations for the New SmugMug, more to come!
Please check out my gallery of customisations for the New SmugMug, more to come!
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
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
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.
Please check out my gallery of customisations for the New SmugMug, more to come!
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;
}
Member: ASMP; EP; NPPA; CPS
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
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; }Please check out my gallery of customisations for the New SmugMug, more to come!
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
/* 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; }Please check out my gallery of customisations for the New SmugMug, more to come!
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
/* 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; }Please check out my gallery of customisations for the New SmugMug, more to come!
http://www.sherlockphotography.org/Customisations/Lightbox-captions
These are the changes from the last version:
http://www.mergely.com/w8m68Jk6/
Please check out my gallery of customisations for the New SmugMug, more to come!
Once again you've come to the rescue!!
Works great again.
Thanks Lamah!
Member: ASMP; EP; NPPA; CPS
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.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
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.
Please check out my gallery of customisations for the New SmugMug, more to come!
I really appreciate it, thanks so much! --Jody
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
Please check out my gallery of customisations for the New SmugMug, more to come!
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
Please check out my gallery of customisations for the New SmugMug, more to come!
That fixed it, thank you. I'll try to remember for future updates...
/* 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...
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!
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