Options
Meshing Sherlock lightbox codes with new Smug lightbox
ChancyRat
Registered Users Posts: 2,141 Major grins
I want to change the caption to always show below the photo and remove the scroll bar.
Currently I need help getting there because Nicholas' code, while it works, also breaks other lightbox code.
An example image: http://www.joinrats.com/RatsAreHystericallyFunny/Hysterical/i-tFmTZkc/A
[EDITED to say: my site currently has Nicholas' code removed.]
I started with other code from DG threads on lightbox, and was able to obtain arrows, icons, and x codes, with the right color and background, mostly not using Nicholas' codes.
Then I added Nicholas' code that aims to fix the caption to be always open below the image and remove the scroll bar (from http://origin.sherlockphotography.org/Customisations/Lightbox-captions).
The image shows:
- Right side, before Nicholas' code, correct pale yellow background, blue font for icon, arrows.
- Left side, added Nicholas' code in addition to what I already had (and I did exhaustively check for conflicts between all code, but that doesn't mean much since I don't know code), and the background reverts to grey. The caption area stays pale yellow, because I was able to find the line of code in Nicholas' code that controlled that. I cannot find any other place in his code to control the lightbox background color.
How can I tweak, and which code?
His code that's causing problems:
THANKS.
Currently I need help getting there because Nicholas' code, while it works, also breaks other lightbox code.
An example image: http://www.joinrats.com/RatsAreHystericallyFunny/Hysterical/i-tFmTZkc/A
[EDITED to say: my site currently has Nicholas' code removed.]
I started with other code from DG threads on lightbox, and was able to obtain arrows, icons, and x codes, with the right color and background, mostly not using Nicholas' codes.
Then I added Nicholas' code that aims to fix the caption to be always open below the image and remove the scroll bar (from http://origin.sherlockphotography.org/Customisations/Lightbox-captions).
The image shows:
- Right side, before Nicholas' code, correct pale yellow background, blue font for icon, arrows.
- Left side, added Nicholas' code in addition to what I already had (and I did exhaustively check for conflicts between all code, but that doesn't mean much since I don't know code), and the background reverts to grey. The caption area stays pale yellow, because I was able to find the line of code in Nicholas' code that controlled that. I cannot find any other place in his code to control the lightbox background color.
How can I tweak, and which code?
His code that's causing problems:
/**
* 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://origin.sherlockphotography.org/Customisations/Lightbox-captions
*/
.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: #FFFFCC !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;
}
THANKS.
0