New: Customize Your Lightbox

leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
edited April 16, 2015 in SmugMug Product News
I am pleased to announce that you no longer need CSS code to customize your lightbox. You can now alter a number of Lightbox settings right from the Customizer.

Additionally, you will also find the "Gallery" settings in the Customizer, where you can set the default Gallery Style as well as tweak how the different Gallery Styles are displayed.

Lastly, we've added the ability to select the size of the Thumbnails images in SmugMug style. You may choose between "Small" (the current size) and "Tiny". Setting the thumbnails to Tiny will display more thumbnails per page.

To customize the Lightbox, navigate to one of your galleries and then enter the Customizer. Make sure "All Galleries" is selected and a "Lightbox" option will be displayed under Content.

i-Lp75F3w-L.jpg

The following options are possible in the Lightbox Customization settings:
i-Cc8M6TM-L.png

- "Auto Hide Controls" will automatically hide the photo tools at the bottom of the Lightbox as a visitor browses. When they move their mouse, the tools will reveal themselves to ensure those Share and Buy buttons are never hard for your visitors to find. Setting this to OFF will display the tools at all times.
- "Transparent Background" toggles your visitor’s ability to see your site behind the Lightbox or not. Let them know they haven’t left your site, or go for a fully clean, uncluttered aesthetic. Up to you!
- "Toolbar" controls where the photo tools align at the bottom of your visitor’s screen. Pin them to the image width so they always appear at the edge of your photo, or pin them to full width so they adjust to be at the edge of your visitor’s browser window.
- "Title" allows you to turn your photo titles on or off while in Lightbox viewing mode.
- "Caption" allows you to hide or reveal your photo captions while in Lightbox viewing mode.
- "Keywords" lets you hide or reveal your photo keywords while in Lightbox viewing mode.
- "Slideshow" hides or reveals the slideshow’s play button while in Lightbox viewing mode.
- "Buy Button Color" controls which Theme color will apply to the button: Accent, Emphasized, or Default.
- "Buy Button Style" controls whether your buy button appears as a full button with text, as a shopping cart icon, or as a shopping cart icon button. Make that buy button stand out or blend in as much as you like!

The Help pages have been updated and you can find more at the new help page, "Can I Customize my Lightbox?"

DGrin note: The changes to the Lightbox may overwrite or interfere with previous CSS Customizations for the Lightbox. If you have used someone's CSS Customizations to alter your lightbox you may need to verify that the Lightbox still displays as you wish.
dGrin Afficionado
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
«1

Comments

  • denisegoldbergdenisegoldberg Administrators Posts: 14,352 moderator
    edited March 25, 2015
    leftquark wrote: »
    - "Slideshow" hides or reveals the slideshow’s play button while in Lightbox viewing mode.
    Very cool, thanks!

    But - I'm a little confused by the Slideshow entry. I don't see a slideshow button in lightbox mode - it doesn't matter if the setting is On or Off. What am I missing?

    --- Denise
    https://www.denisegoldberg.com ... https://denise.smugmug.com

    Musings & ramblings at https://denisegoldberg.blogspot.com
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited March 25, 2015
    denisegoldberg wrote: »
    But - I'm a little confused by the Slideshow entry. I don't see a slideshow button in lightbox mode - it doesn't matter if the setting is On or Off. What am I missing?

    Next to your title (bottom left corner) is a little triangular play button. Clicking that will launch the slideshow.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • denisegoldbergdenisegoldberg Administrators Posts: 14,352 moderator
    edited March 25, 2015
    leftquark wrote: »
    Next to your title (bottom left corner) is a little triangular play button. Clicking that will launch the slideshow.
    Wow - I never noticed that before!
    Thank you!

    I love changes like this one, so nice to provide a way to tailor the lightbox without needing code.

    --- Denise
    https://www.denisegoldberg.com ... https://denise.smugmug.com

    Musings & ramblings at https://denisegoldberg.blogspot.com
  • JtringJtring Registered Users Posts: 675 Major grins
    edited March 25, 2015
    Nice little addition. I've mostly got my custom CSS cleaned up around the changes. But I have one question and one comment -- both suggestions really -- since March seems to be the month to touch the lightbox.

    Question: Is there a way you could make it so I could change the speed at which the panel at the bottom of the lightbox auto-hides? It looks like it's set to 3 seconds after hover ends. Looks like you do it via JS rather than CSS transitions. I'd personally appreciate it moving a little faster and others might like other things as well.

    Comment: I think you missed an opportunity to fix a fit-and-finish bug that's been around since the last round of lightbox updates in March 2014. If the lightbox needs scroll bars, the controls overlap them. See the screenshot below. It shows a piece of a large image displayed at original size, with scroll bars, in Firefox. Note how the close button at the upper right, the forward arrow at the right, and the panel at the bottom all overlap the scroll bar by maybe 6 pixels. The March 2014 update located these controls 15 pixels back from the edge. At the time, that was right for Chrome but not for most other browsers. Now that Chrome has fattened its scroll bars, it's off for all browsers that I know of. This is clearly not a functionality problem, but it sure makes SmugMug look dorky. Probably not the image you want to convey. (This is easy for me to patch via CSS, of course, but it really ought to get worked by SM.)

    References:
    1. http://dgrin.com/showthread.php?t=245887 (this bug started out very bad and a partial patch went in fast)
    2. http://dgrin.com/showthread.php?t=245841 (discussed a ways down in the March 2014 product news announcement thread)
    3. http://dgrin.com/showthread.php?t=247209 (a related issue popped up two months later)
    A screen shot from Firefox

    i-2GPZ93x-L.jpg

    Higher fidelity at http://jtringl.smugmug.com/Other/Working/n-CNjrs/i-2GPZ93x/A
    Jim Ringland . . . . . jtringl.smugmug.com
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited March 26, 2015
    Jtring wrote: »
    ...
    Question: Is there a way you could make it so I could change the speed at which the panel at the
    bottom of the lightbox auto-hides? It looks like it's set to 3 seconds after hover ends. ...
    I totally agree with this. But how would the viewer have enough time to read the caption before it
    disappears? Keep wiggling mouse? Slide mouse pointer over caption to freeze it? Move mouse off
    photo? off browser? Also all the bottom buttons are relevant.

    I think at a minmum moving the mouse out of the browser window should immediately hide overlay.
    Or over prev/next chevrons.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited March 26, 2015
    leftquark wrote: »
    DGrin note: The changes to the Lightbox may overwrite or interfere with previous CSS Customizations for the Lightbox. If you have used someone's CSS Customizations to alter your lightbox you may need to verify that the Lightbox still displays as you wish.
    Does this explain why my CSS to expand the width of the title and caption no longer appears to work, and that these items have now contracted back to the default width?

    How do I reinstate my modification? I can't see any parameter among the new settings to do this, or am I missing something?
    At SmugMug • On Facebook • Photo Blog • Tools of Trade
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited March 26, 2015
    W.W. Webster wrote: »
    Does this explain why my CSS to expand the width of the title and caption no longer appears to work, and that these items have now contracted back to the default width?

    How do I reinstate my modification? I can't see any parameter among the new settings to do this, or am I missing something?

    I think my customizations still worked but looked a bit jumbled when I used some of the new features to pull the info bar in with the width of the photo. I had to re-jigger my CSS so that it worked better. Here's what I've got now to make things look right (I think this is all of it. There's a lot of CSS and I think I grabbed the pertinent parts):
    /* Make the width of the lightbox caption wider */
.sm-user-ui .sm-lightbox-caption {
  max-width: 1000px !important;
}

/* SmugMug had the lightbox caption area really wide but the text in it much
   skinner. The scroll bar was very far away. Bring it in to match 
   the width of the lightbox caption  */
.sm-user-ui .sm-lightbox-panel .sm-lightbox-info {
  max-width: none !important;
  margin-right: 350px !important;
}

/* fix the black transparent bar so it's the proper width */
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-ft-center {
  margin-right: 0px !important; 
}
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited March 26, 2015
    Jtring wrote: »
    Question: Is there a way you could make it so I could change the speed at which the panel at the bottom of the lightbox auto-hides?
    I'll add it to our list of things we will explore for the next Lightbox update.
    Jtring wrote: »
    Comment: I think you missed an opportunity to fix a fit-and-finish bug that's been around since the last round of lightbox updates in March 2014. If the lightbox needs scroll bars, the controls overlap them.
    Let me investigate and get back to you.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • ThelensspotThelensspot Registered Users Posts: 2,041 Major grins
    edited March 26, 2015
    Thanks for the update and all the time and effort here. wings.gif
    "Photography is partly art and partly science. Really good photography adds discipline, sacrifice and a never ending pursuit of photographic excellence"...ziggy53

  • JtringJtring Registered Users Posts: 675 Major grins
    edited March 26, 2015
    I'd like thank you for one more change that you didn't report on. When editing the All Galleries template, in addition to the new Gallery and Lightbox entries on the list at the right, there appear to be new entries for any Entire Site blocks that carry over. In particular, my site CSS mods, which I've put in a block on the Entire Site template, shows up on that list. I can get at it directly rather than having to change pages. Since I've been diddling with my CSS a lot in the last day, that small addition has been a big time-saver. So I'd like to send a virtual pat on the back to the developers who did this. This unheralded change made my life easier.
    Jim Ringland . . . . . jtringl.smugmug.com
  • FergusonFerguson Registered Users Posts: 1,345 Major grins
    edited March 26, 2015
    leftquark wrote: »
    I am pleased to announce that you no longer need CSS code to customize your lightbox. You can now alter a number of Lightbox settings right from the Customizer.

    Anyone else using the tools from Sherlock Photography for their Lightbox customization may want to test their code, as there was something in the always-show-caption code that this broke. Haven't figured out what yet, but I just got word no one could get to the tool bar any longer to access the download button.

    I removed Sherlock's customization and it works again (though of course brings up the issues that fixed). I'll explore further, but just a head's up since those customizations are somewhat widely used.
    http://captivephotons.com
  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited March 26, 2015
    Cool new stuff - especially the chance to turn the buy button into an icon that fits to the other icons on the bottom line (size, download, info...)
    For all those of you who have customized that code to show some text behind those buttons / icons and who want the same type of customization to this add the following code:
     /* Lightbox Add the word "Buy photos" after the Buy button */
  .sm-button.sm-lightbox-buy-button:after {
    content: " Buy photos" !important; /*Adds the text " Buy photos" after the icon*/
    font-size: 95%;
  }

    So it should be added to the CSS valid for "All Galleries" included in here like this (red):
    /*Buttons with explanational text*/
/* For large screens only  */
@media only screen and (min-width: 1200px) {
  
  /* Add the word "Download" after the download button */
  .sm-button.sm-button-image-download:after {
    content: " Download" !important;
    font-size: 95%;
  }

  /* Add the word "Info" after the info button */
  .sm-button.sm-button-image-info:after {
    content: " Info" !important;
    font-size: 95%;
  }

  /* Add the word "Tools" after the tools button */
  .sm-button.sm-button-image-tools:after {
    content: " Tools" !important;
    font-size: 95%;
  }

  /* Add the word "Like" after the like button */
  .sm-button.sm-button-image-like:after {
    content: " Like" !important;
    font-size: 95%;
  }

  /* Lightbox Add the word "Comment" after the Comments button */
  .sm-lightbox-icons .sm-button.sm-button-image-comment:after {
    content: " Comment" !important;
    font-size: 95%;
  }

  /* Lightbox Add the word "Share" after the Share button */
  .sm-lightbox-icons .sm-button.sm-button-image-share:after {
    content: " Share" !important;
    font-size: 95%;
  }

  /* Lightbox Add the word "Sizes" after the Sizes button */
  .sm-lightbox-icons .sm-button.sm-button-image-sizes:after {
    content: " Sizes" !important;
    font-size: 95%;
  }
  
  /* Lightbox Add the word "Buy photos" after the Buy button */
 [COLOR="Red"][B] .sm-button.sm-lightbox-buy-button:after {
    content: " Buy photos" !important;
    font-size: 95%;
  }[/B][/COLOR]
}

    Honor to those who developed the first part of this code (Sherlock?) - I only added that later paragraph.
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • David_S85David_S85 Administrators Posts: 13,242 moderator
    edited March 26, 2015
    Ferguson wrote: »
    Anyone else using the tools from Sherlock Photography for their Lightbox customization may want to test their code, as there was something in the always-show-caption code that this broke. Haven't figured out what yet, but I just got word no one could get to the tool bar any longer to access the download button.

    I removed Sherlock's customization and it works again (though of course brings up the issues that fixed). I'll explore further, but just a head's up since those customizations are somewhat widely used.

    Nick has fixed some of that as of yesterday (he's quick!). More info in this thread: http://dgrin.com/showthread.php?t=241090&page=3
    My Smugmug
    "You miss 100% of the shots you don't take" - Wayne Gretzky
  • W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited March 26, 2015
    leftquark wrote: »
    Here's what I've got now to make things look right (I think this is all of it. There's a lot of CSS and I think I grabbed the pertinent parts) ...
    Thanks, Aaron, that appears to have fixed it!
    At SmugMug • On Facebook • Photo Blog • Tools of Trade
  • markderrymarkderry Registered Users Posts: 68 Big grins
    edited March 27, 2015
    Really Fantastic feature! Looks great!
    ______________________________
    Mark Derry
    markderry.smugmug.com
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited March 29, 2015
    Centering caption
    I've tried your code to center the caption for my lightbox:
    /* Move the lightbox title to the center */ .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title {    position: absolute;  /* Force the position to be where we want it */    left: 50%;             /* Place the title in the middle of the page */ }    /* Move the caption down 30px so it doesn't overlap with the title */ .sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption {    position: absolute;    left: 50%;    top: 30px; }

    http://www.brandolinoimaging.com/Image-Galleries/My-Portfolio/Published-Images/Published-Images-1/i-Vhwkt6t/A
    and all I get is the caption pushed all the way to the right.
    I tried Sherlock's code to always show caption and made his 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!
  • jasonscottphotojasonscottphoto Registered Users Posts: 711 Major grins
    edited March 29, 2015
    Is there a way to make the bar at the bottom completely disappear when the mouse moves away from it?
    Posts by Allyson, the wife/assistant...

    Jason Scott Photography | Blog | FB | Twitter | Google+ | Tumblr | Instagram | YouTube
  • David_S85David_S85 Administrators Posts: 13,242 moderator
    edited March 29, 2015
    jasonscottphoto wrote: »
    Is there a way to make the bar at the bottom completely disappear when the mouse moves away from it?

    If you mean the top of the grayed-out text area block, it moves out of the way after about 5 seconds (in Chrome).
    My Smugmug
    "You miss 100% of the shots you don't take" - Wayne Gretzky
  • jasonscottphotojasonscottphoto Registered Users Posts: 711 Major grins
    edited March 30, 2015
    David_S85 wrote: »
    If you mean the top of the grayed-out text area block, it moves out of the way after about 5 seconds (in Chrome).

    I want it to go away completely as soon as the mouse moves away...
    Posts by Allyson, the wife/assistant...

    Jason Scott Photography | Blog | FB | Twitter | Google+ | Tumblr | Instagram | YouTube
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited March 30, 2015
    jasonscottphoto wrote: »
    I want it to go away completely as soon as the mouse moves away...

    Excellent suggestion -- especially since you're now the second person in just a few days to ask for it (Jting requested this same feature earlier in this conversation). I've taken it back to the team but I can't comment on if or when we'll be able to incorporate this.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • JtringJtring Registered Users Posts: 675 Major grins
    edited March 31, 2015
    jasonscottphoto wrote: »
    Is there a way to make the bar at the bottom completely disappear when the mouse moves away from it?

    I think this CSS snippet will do the job. I put this up on my site today. I've been updating (and simplifying) my lightbox customization.
    /*HIDE THE LIGHTBOX FOOTER EXCEPT ON HOVER
Footer contains slideshow button, caption, and icon list
J. T. Ringland 2015-03-31 */
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft {
  opacity: 0;
}
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft:hover {
  opacity: inherit;
}
    This doesn't do anything to the other controls, the expand, close, previous, and next buttons. I've opted to make them never disappear, but to make the background on them transparent.
    /* MAKE BACKGROUND FOR CONTROLS TRANSPARENT, THEN NEVER HIDE THEM  
Remove background on controls (buttons for expand, close, next, and previous)
Then force opacity to 1 so they are always present 
J. T. Ringland 2015-03-31*/
.sm-user-ui .sm-lightbox-basic .sm-lightbox-content .yui3-widget-hd .sm-lightbox-tools .sm-button,
.sm-user-ui .sm-lightbox-basic .yui3-widget-hd .sm-lightbox-nav  {
    background-color:rgba(59,59,59,0);
}    
.sm-user-ui .sm-lightbox-basic .yui3-widget-hd {
    opacity: 1;
}
    You can see the lightbox in operation on my site, along with some other adjustments to the lightbox caption area.
    Jim Ringland . . . . . jtringl.smugmug.com
  • JtringJtring Registered Users Posts: 675 Major grins
    edited March 31, 2015
    leftquark wrote: »
    Excellent suggestion -- especially since you're now the second person in just a few days to ask for it (Jting requested this same feature earlier in this conversation). I've taken it back to the team but I can't comment on if or when we'll be able to incorporate this.

    And, obviously, I've figured out how to do it myself ...
    Jim Ringland . . . . . jtringl.smugmug.com
  • Erick LErick L Registered Users Posts: 355 Major grins
    edited April 3, 2015
    leftquark wrote: »
    I am pleased to announce that you no longer need CSS code to customize your lightbox. You can now alter a number of Lightbox settings right from the Customizer.


    DGrin note: The changes to the Lightbox may overwrite or interfere with previous CSS Customizations for the Lightbox. If you have used someone's CSS Customizations to alter your lightbox you may need to verify that the Lightbox still displays as you wish.

    Great, not only the upate doesn't fix problems, it creates more!

    Could we get these announcements on our homepage instead of finding out when our sites are broken?
    Erick - borealphoto.com
    borealphoto.smugmug.com
  • Erick LErick L Registered Users Posts: 355 Major grins
    edited April 3, 2015
    Is there a way to have all the controls at the bottom instead of spread all over the page and covering parts of the photo? I don't know how SM thought this looked good. I'd like the slideshow play button, both arrows and "X" bunched together, under the photo inline (above or under) the "share", tools, etc. All those on one side. And the Title, captions and keywords on the other side but always visible.

    Thanks
    Erick - borealphoto.com
    borealphoto.smugmug.com
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited April 3, 2015
    Erick L wrote: »
    Great, not only the update doesn't fix problems, it creates more!
    Would you be able to describe this in greater detail (perhaps it was your next comment?). This update adds a number of features that people were coming up with 'hacks' to solve, and it does it without requiring any code. Now every SmugMug user can take advantage of these Lightbox features and not just the ones on dgrin who use the code that Nick Sherlock or I have provided! In the future we're going to try to start building in tools so that you won't need CSS customizations to do these things. Were there other problems that need fixing that we didn't address?
    Erick L wrote: »
    Could we get these announcements on our homepage instead of finding out when our sites are broken?

    We usually announce new features via the Quick News feature on your homepage, via blog posts, and through the newsletters once they've been tested on the live site for a little period of time. We do notify the dgrin community immediately since many of you are more plugged in and interested in the advanced customizations.
    Erick L wrote: »
    Is there a way to have all the controls at the bottom instead of spread all over the page and covering parts of the photo? I'd like the slideshow play button, both arrows and "X" bunched together, under the photo inline (above or under) the "share", tools, etc. All those on one side. And the Title, captions and keywords on the other side but always visible.
    Standard and common design User Interface practice always has the close button at the top right corner of the screen, with navigation arrows in the center on the left/right side of the screen. Facebook, Flickr, 500px, and about every other Photography service do it this way since it's what visitors have come to understand and expect. With that said, you can customize your lightbox further by using the following:

    First, I'd recommend setting your Lightbox Toolbar to be "Image Width" in the new Lightbox settings.
    You can then move your close button down using: 
    /* Move the Close Button Down */ 
.sm-lightbox .yui3-widget-hd .sm-lightbox-tools {
	bottom: 0px !important;
	top: inherit !important;
}
    The navigation arrows can be moved similarly.

    We wanted the Lightbox to showcase your photo, which is why the title and caption are minimized by default" Nick Sherlock has some CSS for always showing the title and caption.

    Let me know if there is anything else I can help with.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Erick LErick L Registered Users Posts: 355 Major grins
    edited April 3, 2015
    The update doesn't fix anything that was done via CSS before. Now I can't figure what CSS I have to change so my site displays as before.

    The X and arrows are ugly on every websites. It covers the photo in some case.

    You may want to show the photo but there's an X covering one bit of my photo, arrows covering other bits and a caption that is cut off so when people want to read it, they have to hover every single time... and then it covers the photo as well. I'd rather have showing at all time in a fixed location, without NOTHING over the image.
    Erick - borealphoto.com
    borealphoto.smugmug.com
  • Erick LErick L Registered Users Posts: 355 Major grins
    edited April 3, 2015
    leftquark wrote: »
    With that said, you can customize your lightbox further by using the following:

    First, I'd recommend setting your Lightbox Toolbar to be "Image Width" in the new Lightbox settings.
    You can then move your close button down using: 
    /* Move the Close Button Down */ 
.sm-lightbox .yui3-widget-hd .sm-lightbox-tools {
	bottom: 0px !important;
	top: inherit !important;
}
    The navigation arrows can be moved similarly.

    That doesn't cut it. With the toolbar at image width, it changes with every photo and looks cramped with vertical photos.
    Erick - borealphoto.com
    borealphoto.smugmug.com
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited April 3, 2015
    Erick L wrote: »
    Could we get these announcements on our homepage instead of finding out when our sites are broken?

    Additionally, if you subscribe to the Product News Forum you can get email alerts daily when I announce changes.

    We want to continuously innovate and make your SmugMug site better and sometimes that means adding functionality that will conflict with your custom CSS. We hate to do this but we wanted to make it so that everyone using SmugMug could have these features and not just those of you using these advanced customizations. I will definitely try to alert everyone when these situations will occur and I realize I could do a better job giving you warning ahead-of-time about these.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • HaraldEHaraldE Registered Users Posts: 161 Major grins
    edited April 6, 2015
    leftquark wrote: »
    We wanted the Lightbox to showcase your photo, which is why the title and caption are minimized by default" Nick Sherlock has some CSS for always showing the title and caption.
    I want my Caption to always be shown. So how do I do this?
    ==================
    My focus is on digitizing memories
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited April 6, 2015
    HaraldE wrote: »
    I want my Caption to always be shown. So how do I do this?

    I can try to provide some code (or link to Nick Sherlock's), however, I have a few questions so I can help implement it the way you'd like:
    - When you say "always be shown" do you just mean that the title and caption don't disappear after a few seconds?
    - Do you want it to display down the page, keeping your image as large as possible but requiring the user to scroll to see the caption ?
    - Do you want to shrink the photo so the caption has room on the page, without requiring the user to scroll?
    - Do you want the image to remain large but have the caption overlay the image, as if the small box with the caption has been hovered on and rolls up over the photo?
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Sign In or Register to comment.