Lightbox Size
I am maintaining this for a boosterclub that has amatuer photographers (my wife, 2 others, and myself) taking pictures for the families of football games, mostly under the lights (painful). That being said my smugmug account is accually an iframe in there larger site www.hickoryfootball.org. Here is my question.
Is there a way to change the size of the lightbox when you click to enlarge. Currently my page is 978px to fit in the iframe. When I click on a picture to go full size, it uses the entire Iframe and landscape picutres are half way down the page. Portrait pictures file the entire frame and you have to scroll up and down to see the picture. I would like the lightbox to only take up a max-height of 768px (approximate) so landscape picture stay toward the top of the iframe and you dont have to scroll up and down the page to see pictures that are portrait.
I am maintaining this for a boosterclub that has amatuer photographers (my wife, 2 others, and myself) taking pictures for the families of football games, mostly under the lights (painful). That being said my smugmug account is accually an iframe in there larger site www.hickoryfootball.org. Here is my question.
Is there a way to change the size of the lightbox when you click to enlarge. Currently my page is 978px to fit in the iframe. When I click on a picture to go full size, it uses the entire Iframe and landscape picutres are half way down the page. Portrait pictures file the entire frame and you have to scroll up and down to see the picture. I would like the lightbox to only take up a max-height of 768px (approximate) so landscape picture stay toward the top of the iframe and you dont have to scroll up and down the page to see pictures that are portrait.
Thanks for your help.
Do you still need help with this? Looking at your website it seems you've figured it out?
Do you still need help with this? Looking at your website it seems you've figured it out?
yes, I haven't been able to figure it out. Currently it is sitting full screen and I would like to limit its size. I know the css will be applied to entire site, and I know it is going to be a max-height setting. I am just not sure what the class is.
yes, I haven't been able to figure it out. Currently it is sitting full screen and I would like to limit its size. I know the css will be applied to entire site, and I know it is going to be a max-height setting. I am just not sure what the class is.
For what it's worth, when I looked at your site yesterday, the lightbox only opened up in the iframe. It didn't take up the entire screen.
Thank you for your reply. It sees the iframe as full screen and takes the entire iframe. So for a portrait pictures, the parent has to scroll the outside scroll bar to see the entire picture. I guess its not that big of a deal and it is way better than what I used to have, I was just trying to clean it up. I am gonna give your link a try later tonight to see if thats what I am looking for. Thanks
Thank you for your reply. It sees the iframe as full screen and takes the entire iframe. So for a portrait pictures, the parent has to scroll the outside scroll bar to see the entire picture. I guess its not that big of a deal and it is way better than what I used to have, I was just trying to clean it up. I am gonna give your link a try later tonight to see if thats what I am looking for. Thanks
Try installing this customisation of mine which makes the caption visible all the time:
A useful side-effect of this customisation for your purposes is that it allows the size of the image area to be easily controlled. Add this CSS code to the end of that customisation:
A useful side-effect of this customisation for your purposes is that it allows the size of the image area to be easily controlled. Add this CSS code to the end of that customisation:
A useful side-effect of this customisation for your purposes is that it allows the size of the image area to be easily controlled. Add this CSS code to the end of that customisation:
You can change that "600" to change the maximum height of the photo in the lightbox.
Lamah, this was exactly what I was looking for. THANK YOU VERY MUCH. I went to the forum to get the play button removed. If I could trouble you for one more thing, the navigation arrows are below the cart and picture, is there anyway to bring them up to the picture.
Lamah, this was exactly what I was looking for. THANK YOU VERY MUCH. I went to the forum to get the play button removed. If I could trouble you for one more thing, the navigation arrows are below the cart and picture, is there anyway to bring them up to the picture.
Whoops, there was a bug in the code! Find this section:
/* Previously floating navigation tools stay with the image */
.sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools,.sm-lightbox .sm-lightbox-nav {
position: absolute;
}
Thank you, Thank you!. I'm getting where i want to go. Still a few tweaks I consider critical, but now I have the wrapped text in my gallery names, which was absolutely vital to me, 'cause I couldn't tell what was in the galleries without it.
Is there any way to make those wrapped titles appear under the images in the grid? rather than on the grid photo?
Ooh, it worked to just change the Gallery Display Tab setting Info Style to "Under" instead of "Bottom Bar".
But, when I do that, my other formatting for the text (making the gallery name text smalso, I think written by Allen, but I'm not finding it right now, changing the color & the size of the font go away).
Ooh, it worked to just change the Gallery Display Tab setting Info Style to "Under" instead of "Bottom Bar".
But, when I do that, my other formatting for the text (making the gallery name text smalso, I think written by Allen, but I'm not finding it right now, changing the color & the size of the font go away).
You should be able to control the titles with:
.sm-tile .sm-tile-info a {
color: green !important;
font-size: 18px !important;
}
Quite frankly, I wonder how many people even know they can click on the larger image to GET to the larger lightbox? When hovering over the larger image, I would rather have the little hand open a box that says "Click for larger image" instead of that info box which simply says what I have under the image already. That has always bothered me. Sometimes I add that to my gallery description and tell them to use the arrow keys to go back and forth in that larger view. Also, in lightbox, how many know to use the paper size icon to change the size. I still need to change the larger lightbox icons and add text to them. Unveiled last week.
In answer to your question, I do not like the way SM implemented that. Just the little angle bracket. Does not seem intuitive to me. Think their programmer is like my son (Computer Major graduate) who created a website for our non-profit. Had to get him to change things so non-programmers would have a clue - geeks understood it, regular folks didn't. It is terrible when programmers do not understand who the MAIN audience will be. In SmugMug, they need to program for OUR end users while giving us the tools to easily WOW our endusers.
Guess most folks know what "hover" means these days...or am I trapping my self in my own geek world? I remember Andy thinking a certain icon was known by everyone because Facebook uses it whereby many folks do not use Facebook and would have no idea what the icon meant. Maybe use "Open Caption". Would use same color as filename. Assuming you used red to show it off here.
I kinda like "See Caption" 1st, "Read Caption" 2nd, and "Open Caption" 3rd...think you are on the right track! Let me know how you did it so I can add that to mine! THANKS!
I kinda like "See Caption" 1st, "Read Caption" 2nd, and "Open Caption" 3rd...think you are on the right track! Let me know how you did it so I can add that to mine! THANKS!
Here's what I ended up with, probably a better way but this worked for me. Had to increase width to
fit text. Left align so it doesn't run into things on right, problem with very small browser widths though.
"all galleries" CSS
Here's what I ended up with, probably a better way but this worked for me. Had to increase width to
fit text. Left align so it doesn't run into things on right, problem with very small browser widths though.
"all galleries" CSS
The last one is not needed, I was just overriding a CSS rule higher up. Gota find and delete that, just lazy.
Thanks. I'll add it to my CSS customization site as soon as I have some free time (and credit you of course)!
Personally, I think that the lightbox is designed quite well. The lightbox is a way to see the PHOTO as large as possible. It's not meant to have the photo and the caption displayed. That's why there's multiple views that fit the caption and the photo into 1 screen (aka the SM Layout). When a user goes from my SM Layout to my lightbox, I want them to see the IMAGE and only the image. The fact that they can actually read the caption, as it slides out, is a bonus to me.
I realize that for many of you who use the COLLAGE layouts, this is a bit trickier. There is no-where for the caption to be displayed except in the lightbox. Perhaps SmugMug should implement 2 different lightboxes: one in collage/thumbnail layouts where the caption is on the right hand side (for example), and one in SM/Journal Layout where the lightbox acts like it currently does.
Quite frankly, I wonder how many people even know they can click on the larger image to GET to the larger lightbox? When hovering over the larger image, I would rather have the little hand open a box that says "Click for larger image" instead of that info box which simply says what I have under the image already. That has always bothered me. Sometimes I add that to my gallery description and tell them to use the arrow keys to go back and forth in that larger view. Also, in lightbox, how many know to use the paper size icon to change the size. I still need to change the larger lightbox icons and add text to them. Unveiled last week.
Here's what I ended up with, probably a better way but this worked for me. Had to increase width to
fit text. Left align so it doesn't run into things on right, problem with very small browser widths though.
"all galleries" CSS
Thanks! Works great! I actually went a step further and put this in " <---See Caption". Maybe that's too much!:D
The only problem I found is when the browser is narrowed especially if the text is long. It bumps the
right buttons and does funny things. Have no idea what happens on small screens like an ipad.
I browsed through the thread to see if this question was answered but I am having issue's with the right click protection. Currently I have the code that was provided in the form in my CSS for the entire site could someone help me on this issue please. Thank you leftquark for everything you are doing here!
I browsed through the thread to see if this question was answered but I am having issue's with the right click protection. Currently I have the code that was provided in the form in my CSS for the entire site could someone help me on this issue please. Thank you leftquark for everything you are doing here!
I browsed through the thread to see if this question was answered but I am having issue's with the right click protection. Currently I have the code that was provided in the form in my CSS for the entire site could someone help me on this issue please. Thank you leftquark for everything you are doing here!
Don't know the problem either. Right-click protection is assigned by a menu item in Organize, then Gallery Settings. Understand Right-Click protection will thwart Goggle Image Search from indexing your images.
Comments
Thank you for all your help!
I just started to customize my website and love your menu bar at the bottom of your "full Screen image"
How can I create one similar to yours?
How can I add the "ADD TO CART" in the right corner?
http://www.carlleblanc.ca
Thank you!
Carl
I am maintaining this for a boosterclub that has amatuer photographers (my wife, 2 others, and myself) taking pictures for the families of football games, mostly under the lights (painful). That being said my smugmug account is accually an iframe in there larger site www.hickoryfootball.org. Here is my question.
Is there a way to change the size of the lightbox when you click to enlarge. Currently my page is 978px to fit in the iframe. When I click on a picture to go full size, it uses the entire Iframe and landscape picutres are half way down the page. Portrait pictures file the entire frame and you have to scroll up and down to see the picture. I would like the lightbox to only take up a max-height of 768px (approximate) so landscape picture stay toward the top of the iframe and you dont have to scroll up and down the page to see pictures that are portrait.
Thanks for your help.
Do you still need help with this? Looking at your website it seems you've figured it out?
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
yes, I haven't been able to figure it out. Currently it is sitting full screen and I would like to limit its size. I know the css will be applied to entire site, and I know it is going to be a max-height setting. I am just not sure what the class is.
if I had to guess
.sm-user-us, .sm-lightbox-tools { max-height:xxxpx;}I haven't tried yet but that is what I was going to try tomorrow.
Have you looked at this thread? http://www.dgrin.com/showthread.php?t=241261&highlight=lightbox
For what it's worth, when I looked at your site yesterday, the lightbox only opened up in the iframe. It didn't take up the entire screen.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Thank you for your reply. It sees the iframe as full screen and takes the entire iframe. So for a portrait pictures, the parent has to scroll the outside scroll bar to see the entire picture. I guess its not that big of a deal and it is way better than what I used to have, I was just trying to clean it up. I am gonna give your link a try later tonight to see if thats what I am looking for. Thanks
Try installing this customisation of mine which makes the caption visible all the time:
http://www.sherlockphotography.org/Customisations/Lightbox-captions
A useful side-effect of this customisation for your purposes is that it allows the size of the image area to be easily controlled. Add this CSS code to the end of that customisation:
.sm-lightbox .sm-lightbox-content { height: 600px !important; }You can change that "600" to change the maximum height of the photo in the lightbox.
Please check out my gallery of customisations for the New SmugMug, more to come!
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Lamah, this was exactly what I was looking for. THANK YOU VERY MUCH. I went to the forum to get the play button removed. If I could trouble you for one more thing, the navigation arrows are below the cart and picture, is there anyway to bring them up to the picture.
Whoops, there was a bug in the code! Find this section:
/* Previously floating navigation tools stay with the image */ .sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools,.sm-lightbox .sm-lightbox-nav { position: absolute; }Replace it with:
/* Previously floating navigation tools stay with the image */ .sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools, .sm-user-ui .sm-lightbox .sm-lightbox-nav { position: absolute; }Please check out my gallery of customisations for the New SmugMug, more to come!
PERFECT! Again thanks! The help some of you provide on here is priceless.
Is there any way to make those wrapped titles appear under the images in the grid? rather than on the grid photo?
But, when I do that, my other formatting for the text (making the gallery name text smalso, I think written by Allen, but I'm not finding it right now, changing the color & the size of the font go away).
You should be able to control the titles with:
.sm-tile .sm-tile-info a { color: green !important; font-size: 18px !important; }Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Leftquark, have you unveiled your site yet or are you still in LEGACY. If you have, how did you get your tabs under prints
I have unveiled. I posted how to do it here: http://www.dgrin.com/showthread.php?t=241478&highlight=prints+page
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Do y'all think this is a little too much? Do any of your site visitors even know they can see the caption in lightbox?
My Website index | My Blog
In answer to your question, I do not like the way SM implemented that. Just the little angle bracket. Does not seem intuitive to me. Think their programmer is like my son (Computer Major graduate) who created a website for our non-profit. Had to get him to change things so non-programmers would have a clue - geeks understood it, regular folks didn't. It is terrible when programmers do not understand who the MAIN audience will be. In SmugMug, they need to program for OUR end users while giving us the tools to easily WOW our endusers.
Guess most folks know what "hover" means these days...or am I trapping my self in my own geek world? I remember Andy thinking a certain icon was known by everyone because Facebook uses it whereby many folks do not use Facebook and would have no idea what the icon meant. Maybe use "Open Caption". Would use same color as filename. Assuming you used red to show it off here.
I like "Open Caption", "Read Caption" or "See Caption".
My Website index | My Blog
fit text. Left align so it doesn't run into things on right, problem with very small browser widths though.
"all galleries" CSS
.sm-lightbox-info-arrow.sm-fonticon { color:red !important; } .sm-lightbox-info-arrow {width: 180px;} .sm-lightbox-info-arrow.sm-fonticon:after { content:" See Caption"; color:red; font-size: 16pt; font-weight:normal !important; } .sm-lightbox-info { text-align: left !important; }The last one is not needed, I was just overriding a CSS rule higher up. Gota find and delete that, just lazy.My Website index | My Blog
Thanks. I'll add it to my CSS customization site as soon as I have some free time (and credit you of course)!
Personally, I think that the lightbox is designed quite well. The lightbox is a way to see the PHOTO as large as possible. It's not meant to have the photo and the caption displayed. That's why there's multiple views that fit the caption and the photo into 1 screen (aka the SM Layout). When a user goes from my SM Layout to my lightbox, I want them to see the IMAGE and only the image. The fact that they can actually read the caption, as it slides out, is a bonus to me.
I realize that for many of you who use the COLLAGE layouts, this is a bit trickier. There is no-where for the caption to be displayed except in the lightbox. Perhaps SmugMug should implement 2 different lightboxes: one in collage/thumbnail layouts where the caption is on the right hand side (for example), and one in SM/Journal Layout where the lightbox acts like it currently does.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Someone posted code to do exactly this, and I describe how to implement it here: http://www.aaronmphotography.com/Customizations/Gallery/Click-to-Enlarge
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Thanks! Works great! I actually went a step further and put this in " <---See Caption". Maybe that's too much!:D
right buttons and does funny things. Have no idea what happens on small screens like an ipad.
My Website index | My Blog
http://www.k-ophotography.com/
What exactly is your problem?
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Don't know the problem either. Right-click protection is assigned by a menu item in Organize, then Gallery Settings. Understand Right-Click protection will thwart Goggle Image Search from indexing your images.
The problem is that when you do a right click on my images no message pop's up
http://www.k-ophotography.com/
So, no message. Are you able to copy the file with the right click? Or can't copy but no message saying you can't?