Border in custom lightbox

goldeneye99

I've customized my Lightbox view to put a border around my images but for some reason the border isn't right against the image on 2 of the sides (for a landscape image there is a black border on the left and right, and for a vertical on the top and bottom).

Example here:
http://goldeneye99.smugmug.com/Other/Falkland-Islands/i-C9Ggr7L/A

The code that I think might be needing editing is as follows:

/* reduce the size of the image in lightbox */
.sm-lightbox-image {
border: 30px solid #333333;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
-webkit-backface-visibility: hidden;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-repeat: no-repeat;
background-position: center center;
background-size: contain !important;
}

Thanks,
Nigel

www.nigelrobertsphotography.com

ChancyRat

I can't contribute code to help, but I have a question - do you have video files as well as image files? If you do, could you try playing a video in lightbox mode, where you have added the border code? I had problems that I haven't sorted out yet and this was one of them. Just curious. thanks.

Hikin' Mike

Unfortunately your right-click protection is making it difficult to use the Firebug tool. Can't help you, sorry.

I added that code to my site and it worked for me.

goldeneye99

I didn't know I had right click protection turned on - I had it on my legacy site but not on this one. I don't see any code that I've entered to turn it on - if you can tell me how to turn it off I will if that will make it easier to diagnose problem.

phaserbeam

I'm not sure but you are scaling the image with 0.8 which might work for the y-axis but the x-axis does have a different size and so you might get black borders on one axis.

For example if you have an image on 1000x600 and you want to have a border of 10% then you get 60px on the top/bottom border but 100px on the left/right border. If you then create a border with 60px of solid #333333 you would see black margins of 40px on the left and right.

What about this:

/* reduce the size of the image in lightbox */

.sm-lightbox-basic .sm-lightbox-image {
 border: 30px solid red;
}

.sm-lightbox-basic .yui3-widget-bd {
 -webkit-transform: scale(0.9);
 -moz-transform: scale(0.9);
 -ms-transform: scale(0.9);
 transform: scale(0.9);
 -webkit-backface-visibility: hidden;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 background-repeat: no-repeat;
 background-position: center center;
 background-size: contain !important;
}

goldeneye99

You've pinpointed the problem phaserbeam. I took out the code in my original post and replaced it with yours to get the simple border I want. I still want to have a smaller iimage however so am looking for code to do that. I tried putting your code in my original CSS and removed what I had for a border and changed the scaling to 1.0 (ie. 100%) and still got the black lines - so the code I have is messing up the scaling of the border somehow even when set to 100% which I thought would have effectively removed it's effect. Is there perhaps a transform command I'm missing?

goldeneye99

Thanks phaserbeam - I just realized that I missed part of your code when I first tried it so I've entered it as you have and it almost works perfect except that the image is being pushed to the top of the page (ie. it looks like the bottom of the image is being aligned with the middle of the page so the image is running off the top of the page. Any suggestions?


http://goldeneye99.smugmug.com/Other/Falkland-Islands/i-C9Ggr7L/A

phaserbeam

try to add some margins... i also add a negative left margin since the image seem to be a bit right-shifted...

/* reduce the size of the image in lightbox */

.sm-lightbox-basic .sm-lightbox-image {
 border: 30px solid #333333;
}

.sm-lightbox-basic .yui3-widget-bd {
[COLOR=Red] margin-left:-15px;
 margin-top:60px;[/COLOR]
 -webkit-transform: scale(0.8);
 -moz-transform: scale(0.8);
 -ms-transform: scale(0.8);
 transform: scale(0.8);
 -webkit-backface-visibility: hidden;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 background-repeat: no-repeat;
 background-position: center center;
 background-size: contain !important;
}


        
        

        
        
            

            

            
                

goldeneye99

Thanks phaserbeam, I have to enter in 440 px to get it to shift down enough but then it's still not far enough when I go to a full screen mode. The fact that I have to enter in so many px and that it doesn't seem consistent from one view to another suggests that perhaps there is some other code I'm missing.

phaserbeam

I don't understand why you need 440px to shift the photo down. In my browser all ican see is now the upper half of the image (see screenshot below).

Can you try this new code? It should center the photo on the y-axis also (make sure to remove all old code):

.sm-lightbox .sm-lightbox-content img {
  transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform-origin: center center;
  -moz-transform-origin: center center;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
}

.sm-lightbox .sm-lightbox-content .sm-lightbox-image {
border: 30px solid #333333;
position:relative;
left:-30px;
top:-30px;
}

I applied the code to my site and it looks ok. Can you check that it looks on your device good also? If so the code seem to work and maybe you have some other code on your site that causing some trouble.

goldeneye99

Something strange going on. That's not what I see when I use IE9 or Google Chrome and I've tried on 2 computers (and cleared cache on both). If I don't put that adjustment in then mine only shows the lower half. Is there some position code that I need to reset to the default?

phaserbeam

i just opened chrome and with your current CSS modifications the images will not show completly. I'm missing some parts from top/bottom of the images.

I added my code from post #10 using chrome webtools and everything seem to be fine.

goldeneye99

Thanks phaserbeam! All is working now, I don't know where the problem was but I deleted everything and started over. Could the code be tweaked so that it would do the same on my homepage slideshow (ie. border and scale down)?

phaserbeam

Looks like you have changed something on your lightbox CSS code... photos look OK to me even in unsupported browsers like konqueror and opera12. Looks OK to me also in FireFox26.

Does it work for you now?

P.S. Ahh.. ok, thx for the feedback.

For the homepage slideshow i'm using a code provided by some nice user from dgrin... let me check if i could apply that to your site...

goldeneye99

Yes it's working great in Lightbox! Recopied the code you laid out in post 10 and deleted what I had and it worked fine. Thanks again.

Wondering if I could do something similar for homepage slideshow?

phaserbeam

A first try....

.sm-slideshow .sm-tile-photo {
  border:30px solid #999999!important;
}

.sm-slideshow .sm-slideshow-image {
  transform: scale(0.9);
   -moz-transform: scale(0.9);
   -webkit-transform: scale(0.9);
   -ms-transform: scale(0.9);
  transform-origin: center center;
   -moz-transform-origin: center center;
   -webkit-transform-origin: center center;
   -ms-transform-origin: center center;
  margin-top:-15px;
  margin-left:-15px;
}

P.S.
On my browser i get a scrollbar on the right... useless on your homepage. Not sure if it helps, maybe worth a try (CSS box on homepage only):

body {
  overflow:hidden;
}

P.S. I really like your penguin shots from falkland islands... great work!

goldeneye99

Thanks and thanks phaserbeam! I made the changes you suggested and it's working great - much appreciated.

goldeneye99

I just noticed some odd behaviour when I run the slideshow (triangle in bottom left corner) from Lightbox - the border doesn't get adjusted. I wonder if there some code needed for the Lightbox slideshow that is different from the home page slideshow. Any ideas?

phaserbeam

goldeneye99 wrote: »

I just noticed some odd behaviour when I run the slideshow (triangle in bottom left corner) from Lightbox - the border doesn't get adjusted. I wonder if there some code needed for the Lightbox slideshow that is different from the home page slideshow. Any ideas?

I just updated the code... here is what i have added for testing on homepage slideshow, lightbox slideshow and lightbox image. Everywhere i got a scaled down photo with a border around it. Tested on FireFox only because i have no chrome or IE here right now.

The red part of the following code might not be neccessary if you replace all existing code...

[COLOR=Red].sm-slideshow .sm-tile-photo {
  border:none!important
}[/COLOR]

/* Create border around homepage-slideshow/lightbox-slideshow image */
.sm-page-widget-slideshow .sm-slideshow .sm-tile-photo .sm-tile-content .sm-image,
.sm-lightbox .sm-slideshow .sm-tile-photo .sm-tile-content .sm-image {
  border:30px solid #333333;
}

/* Scale photo in homepage-slideshow/lightbox-slideshow */
.sm-page-widget-slideshow .sm-slideshow .sm-slideshow-image .sm-tile-content .sm-image,
.sm-lightbox .sm-slideshow .sm-slideshow-image .sm-tile-content .sm-image {
  transform: scale(0.9);
   -moz-transform: scale(0.9);
   -webkit-transform: scale(0.9);
   -ms-transform: scale(0.9);
  transform-origin: center center;
   -moz-transform-origin: center center;
   -webkit-transform-origin: center center;
   -ms-transform-origin: center center;
  margin-top:-30px;
  margin-left:-30px;
}

/* Scale lightbox photo */
.sm-lightbox .sm-lightbox-content img {
  transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform-origin: center center;
  -moz-transform-origin: center center;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
}

/* Create border around lightbox photo */
.sm-lightbox .sm-lightbox-content .sm-lightbox-image {
  border: 30px solid #333333;
  position:relative;
  left:-30px;
  top:-30px;
}

Zevs

Hi Phaserbeam and goldeneye99!

I tried the code in your last post on my site and it works great in most cases, really love those borders. The problems I notice is that the lower border gets cut-off partly by the caption/title box at the bottom of the page in teh full image view, and also that in the smugmug gallery style there are no borders on the right hand big photo. If it is possible to get these things to work also it would be fantastic!

Christer W
www.christerwe.com

Zevs

Zevs wrote: »

Hi Phaserbeam and goldeneye99!

I tried the code in your last post on my site and it works great in most cases, really love those borders. The problems I notice is that the lower border gets cut-off partly by the caption/title box at the bottom of the page in teh full image view, and also that in the smugmug gallery style there are no borders on the right hand big photo. If it is possible to get these things to work also it would be fantastic!

Christer W
www.christerwe.com

Ohh I realize that the first problem only seems to happen when I'm logged in, not otherwise. So no need to put any effort into solving that But still wonder how to get borders onto the smugmug style gallery main image.

Zevs

Nobody has any help to offer ...,?

Christer W