Changing the entire lightbox size...possible/how?

tylerareber

Hi! New poster here, but SmugMug'er for a number of years. On the previous version of the Lightbox, I was able to use some custom CSS to force limit the display size of the images in the lightbox to something like 80%. I simply didn't want them displayed fullscreen (I know that's a bit unusual probably, but I just don't like the page aesthetics when it does that). In the new Lightbox, this CSS naturally broke, so I'm looking for a way to do something similar. I think limiting the image size itself in the new lightbox will look kinda funny, so I'm wondering if there's a way I can size the entire lightbox down to like 80% of the page. It seems like the lightbox is a modal window over the background (the gallery)...so It feels like this should be possible..I just haven't figure out how yet. Any help would be greatly appreciated!!

Hikin' Mike

So you don't want to decrease the size of just the photo, you want to decrease the size of everything in the window (icons, image, text)?

tylerareber

I guess resizing the photo itself would be fine, but as is it seems like the navigation arrows and the icons for all the other actions would stay aligned far left and right...if they could kind of "stick" to the image when it's resized smaller, such that they maintain a normal visual distance, that would work too. Something like this, I think would work (mocked in Photoshop). https://i.imgur.com/wWDkwF2.png

This keeps the lightbox itself fullscreen, but kinda sizes the other stuff down to a percentage of the full window.

Alternatively, if there IS a way to just make the lightbox modal (I think it's a modal window?) just appear as a smaller window with a transparent or semi transparent background so it just kinda looks like it's popped open over the rest of the page, that would work too as this would also keep it from being fullscreen.

Hikin' Mike

This is probably as good as it's going to get. The close 'X' is inside the modal window, so it isn't moving like your mock-up. If all you want is to reduce the size of the image, remove .sm-user-ui .sm-lightbox-v2-modal,.

.sm-user-ui .sm-lightbox-v2-modal,
.sm-user-ui .sm-lightbox-v2-photo,
.sm-user-ui .sm-lightbox-v2-photo-buttons {
  width: 80%  !important;
  height: 80%  !important;
  margin: 0 auto  !important;
}

.sm-user-ui .sm-lightbox-v2-photo-buttons {left: 10%;}

tylerareber

Awesome, thank you! I managed to find a few other snippets in the New Lightbox customization thread and I think I have it almost looking exactly how I was envisioning now...you can see an example here: https://tylerareber.photography/Wildlife/i-vKTJ5kC/A (for anyone interested).

Code below (Not sure why...but I have no format toolbar when posting...):


/*
For a transparent background use rgba()
Note: The swipe interaction will move content behind the action bars
so this is recommended on non-touch devices
*/
html:not(.sm-platform-ios):not(.sm-platform-android).sm-user-ui .sm-modal-mask.sm-lightbox-v2-modal-mask[data-opacity="opaque"],
html:not(.sm-platform-ios):not(.sm-platform-android).sm-user-ui .sm-lightbox-v2-navbar,
html:not(.sm-platform-ios):not(.sm-platform-android).sm-user-ui .sm-lightbox-v2-sidebar {
background: none;
width: 80% !important;
height: 80% !important;
margin: 4 auto !important;
padding-left: 9.7%;
padding-top: 7%;
}


html:not(.sm-platform-ios):not(.sm-platform-android).sm-user-ui .sm-lightbox-v2 {
background-color: rgba(0, 0, 0, 0.90);
}

@media screen and (min-width: 961px) {
.sm-user-ui .sm-lightbox-v2-content {
height: calc(100% - 120px);
align-self: center;
}
}

/*Add Border to Collage Landscape & Portrait Galleries*/
.sm-gallery-images .sm-tiles-row-organic .sm-image {
border:1px solid #000000;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

Hikin' Mike

@tylerareber said:
Code below (Not sure why...but I have no format toolbar when posting...):

You need to wrap the code in either single backtick (``) for one line, or three backticks (``` ```) for multiple lines.