Customizing the New Lightbox

1457910

Comments

  • blouieblouie Registered Users Posts: 77 Big grins

    What is the SmugMug timetable to fix these or to provide code to fix them?:

    1. I want my captions back, but without 'View Photo Details' button.

    2. I want to disable the 'Close' popup over the X button; moreover, while I wait to be able to disable it, I don't want the fancier balloon graphic that got put in place recently.

    In sum, I want my Lightbox to look just as it did before this botched rollout was imposed. That is, I want only the image, the caption (in the lower left by the image), and the X button, and no popups - nothing else.

  • camnercamner Registered Users Posts: 109 Major grins
    edited November 3, 2019

    I have deliberately waited for a month or so to see if things have settle down with the new Lightbox. I just took a look at what things look like now, and I was surprised to see that what seems to be standard is to have the caption (when it exists) partly visible at the very bottom of the window (see below). Is this the intended behavior?

    I recognize that it is possible to click on the text to have the left sidebar show photo info, including the caption.

  • sarasphotossarasphotos Registered Users Posts: 3,863 Major grins

    Nope, that is not standard, the caption should have a bit of space below it. Here's an example

    Do you have some old customizations lurking in the background?

  • dragandjordjevicdragandjordjevic Registered Users Posts: 188 Major grins

    @blouie said:

    In sum, I want my Lightbox to look just as it did before this botched rollout was imposed. That is, I want only the image, the caption (in the lower left by the image), and the X button, and no popups - nothing else.

    +1 honestly I find the new lightbox quite hateful :/

  • camnercamner Registered Users Posts: 109 Major grins

    @sarasphotos,

    Good thought! It turned out to be a NEW customization I saw on this board. A modification did the trick. Thanks for the tip.

  • blouieblouie Registered Users Posts: 77 Big grins
    edited January 16, 2020

    I received an email from SmugMug about new Lightbox options. Is this new since last year? If there are new revisions:

    Currently I have code so that I have just:

    • the left and right arrows

    • the X close button (but with the hover popup that says 'Close')

    What I still want to change:

    • Eliminate popup that says 'Close'

    • Show captions (without 'Photo Details' icon or action)

    So what I want finally is just:

    • the left and right arrows

    • the X close button (withOUT the hover popup that says 'Close')

    • caption

    This would restore to what I had before the new Lightbox changes last year.

    Can anyone please advise how to do this?

    Thank you,

    Mark Shapiro
    www.markshapirophoto.com

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    @blouie said:

    • Show captions (without 'Photo Details' icon or action)

    .sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable {opacity: 1;}

  • blouieblouie Registered Users Posts: 77 Big grins

    Thanks, Hikin' Mike.

    I put that code into the All Galleries section. I don't see anything changed in my Lightbox. In particular, I the captions still do not appear.

    However, meanwhile, I have previous code on my site, as discussed in this forum, from last year to deal with unwanted effects of the new Lightbox from last year (including, still in effect, suppressing display of the Photo Details button). But I can't figure out now which codes I might need to disable for your code to work.

    I guess I'll just have to address this all later.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    You either don't have captions or you have conflicting CSS because I just added that to my site and the code works.

  • camnercamner Registered Users Posts: 109 Major grins

    @Hikin' Mike said:
    .sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable {opacity: 1;}

    I'm trying to understand exactly what this is supposed to do. Both with and without this code, given the other things I have set up, Titles and Captions appear in the Lightbox at the bottom of the image. Of course, only the 1st part of the Caption appears if the Caption is longer than fits on 1 line in the viewport and one has to click to get the entire Caption (along with other info) in a sidebar on the left.

    Just to make sure I didn't have a CSS conflict I deleted all my custom CSS and only kept this one line, but that did not make any difference in the appearance.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    @camner said:

    @Hikin' Mike said:
    .sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable {opacity: 1;}

    I'm trying to understand exactly what this is supposed to do. Both with and without this code, given the other things I have set up, Titles and Captions appear in the Lightbox at the bottom of the image. Of course, only the 1st part of the Caption appears if the Caption is longer than fits on 1 line in the viewport and one has to click to get the entire Caption (along with other info) in a sidebar on the left.

    Just to make sure I didn't have a CSS conflict I deleted all my custom CSS and only kept this one line, but that did not make any difference in the appearance.

    He wanted the caption to be displayed all of the time.

  • camnercamner Registered Users Posts: 109 Major grins

    @Hikin' Mike said:
    He wanted the caption to be displayed all of the time.

    That's what I thought, and I'd love to do that, too. I presume that the intent of the CSS you provided was to have the caption show on the left, where it shows up when one clicks on the "details" icon or on the title/caption "bar" overlay at the bottom of the image, right?

    If so, I don't understand why it didn't work for me, since I tried your CSS after deleting ALL of my custom CSS other than that line.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    @camner said:
    If so, I don't understand why it didn't work for me, since I tried your CSS after deleting ALL of my custom CSS other than that line.

    Without seeing your site, I have no idea.

  • camnercamner Registered Users Posts: 109 Major grins
    edited January 20, 2020

    @Hikin' Mike said:

    @camner said:
    If so, I don't understand why it didn't work for me, since I tried your CSS after deleting ALL of my custom CSS other than that line.

    Without seeing your site, I have no idea.

    Sorry...here's the link. I set up this Temp Gallery with a new Theme, and the only custom CSS (stored where you suggest on your website, in the Advanced section of the Theme editor) is the one line you suggested to @blouie. I still don't see the Caption showing up by default in the lightbox, except for the usual one line along the bottom of the image.

    https://camner.smugmug.com/Temp-gallery/

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    @camner said:
    I still don't see the Caption showing up by default in the lightbox, except for the usual one line along the bottom of the image.

    That's where it's supposed to be.

  • camnercamner Registered Users Posts: 109 Major grins

    @Hikin' Mike said:

    @camner said:
    I still don't see the Caption showing up by default in the lightbox, except for the usual one line along the bottom of the image.

    That's where it's supposed to be.

    OK, but it shows up there without your custom CSS, too. What does your custom CSS change? (Sorry if I'm being dense).

    .sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable {opacity: 1;}

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    @camner said:
    .sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable {opacity: 1;}

    He wanted to see the captions all of the time, not just when hovered.

  • camnercamner Registered Users Posts: 109 Major grins

    @Hikin' Mike said:

    @camner said:
    .sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable {opacity: 1;}

    He wanted to see the captions all of the time, not just when hovered.

    But my caption appears without my hovering even when your custom CSS isn't there. I simply can't see any difference between having and omitting the custom CSS in terms of how the caption appears.The caption is always there, without my need to hover over the image. So, I'm still confused about what's going on, since I don't have any custom CSS on this gallery to conflict or otherwise influence the appearance.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    @camner said:
    But my caption appears without my hovering even when your custom CSS isn't there. I simply can't see any difference between having and omitting the custom CSS in terms of how the caption appears.The caption is always there, without my need to hover over the image. So, I'm still confused about what's going on, since I don't have any custom CSS on this gallery to conflict or otherwise influence the appearance.

    They should disappear after a few seconds.

  • camnercamner Registered Users Posts: 109 Major grins

    @Hikin' Mike said:

    @camner said:
    But my caption appears without my hovering even when your custom CSS isn't there. I simply can't see any difference between having and omitting the custom CSS in terms of how the caption appears.The caption is always there, without my need to hover over the image. So, I'm still confused about what's going on, since I don't have any custom CSS on this gallery to conflict or otherwise influence the appearance.

    They should disappear after a few seconds.

    They don't. I click on the image to open it in the Lightbox and do not touch my mouse or keyboard, and the title and caption remain at the bottom of the image. I tried just sitting there for 30 seconds, and the title/caption remained there.

    I wonder if there is a setting somewhere that influences this.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    @camner said:
    They don't. I click on the image to open it in the Lightbox and do not touch my mouse or keyboard, and the title and caption remain at the bottom of the image. I tried just sitting there for 30 seconds, and the title/caption remained there.

    I noticed that. Mine do.

    @camner said:
    I wonder if there is a setting somewhere that influences this.

    Since SM likes to hide settings, there may be one, but I'm not seeing it.

  • camnercamner Registered Users Posts: 109 Major grins

    @camner said:
    I wonder if there is a setting somewhere that influences this.

    @Hikin' Mike said:
    Since SM likes to hide settings, there may be one, but I'm not seeing it.

    You are right about SM hiding settings. One of the things I love about SM is they have so many ways to let us customize things, even without custom CSS, but it's hard to keep track of where one does what. I keep telling myself I should keep copious notes about what I do and where I do it, but I haven't done that yet.

    Anyway, thanks for taking a look at this. Since captions for me work the way I want them to (well, almost...I'd REALLY prefer to have the Lightbox open up with the left sidebar showing...), I'll just keep things the way they are without using your CSS.

  • JtringJtring Registered Users Posts: 675 Major grins
    edited January 21, 2020

    @camner said:
    They don't. I click on the image to open it in the Lightbox and do not touch my mouse or keyboard, and the title and caption remain at the bottom of the image. I tried just sitting there for 30 seconds, and the title/caption remained there.

    I wonder if there is a setting somewhere that influences this.

    Maybe I can add little bit here. Maybe not too.

    In the lightbox, whether the caption overlaying the image (along with all the controls) disappears or not depends on the Auto Hide Controls setting in the Lightbox control panel. To get to that panel, first, from a gallery, get into Customize Content and Design mode. Then click the wrench next to the lightbox tab at the right. From the discussion it looks like camner has it OFF and Mike has it ON. In the SmugMug CSS, the date-hide-ui attribute is only set when Auto Hide Controls is turned ON. Thus, Mike's CSS, which include the attribute selector [data-hide-ui], is only active when it is ON. I think what Mike's line of code does is to use CSS to effectively (not literally) turn Auto Hide Controls from ON to OFF. CSS like this can be a useful way to "flip the switch" if one has lots of galleries off-template. It's a simpler change than marching through a whole bunch of galleries one-by-one. (My personal CSS has something similar to Mike's code.)

    I hope I'm not barging in too unbidden here.

    Jim Ringland . . . . . jtringl.smugmug.com
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    @Jtring said:
    Maybe I can add little bit here. Maybe not too.

    In the lightbox, whether the caption overlaying the image (along with all the controls) disappears or not depends on the Auto Hide Controls setting in the Lightbox control panel. To get to that panel, first, from a gallery, get into Customize Content and Design mode. Then click the wrench next to the lightbox tab at the right. From the discussion it looks like camner has it OFF and Mike has it ON. In the SmugMug CSS, the date-hide-ui attribute is only set when Auto Hide Controls is turned ON. Thus, Mike's CSS, which include the attribute selector [data-hide-ui], is only active when it is ON. I think what Mike's line of code does is to use CSS to effectively (not literally) turn Auto Hide Controls from ON to OFF. CSS like this can be a useful way to "flip the switch" if one has lots of galleries off-template. It's a simpler change than marching through a whole bunch of galleries one-by-one. (My personal CSS has something similar to Mike's code.)

    I hope I'm not barging in too unbidden here.

    Makes sense to me. Good find.

  • camnercamner Registered Users Posts: 109 Major grins

    @Jtring said:

    I hope I'm not barging in too unbidden here.

    Not at all! Your comment is incredibly helpful, as it solves the issue!

  • JtringJtring Registered Users Posts: 675 Major grins

    Glad I could help. And I too too would much prefer to have the Lightbox open with the left sidebar showing the title, caption, and other photo details. No user CSS can do that, unfortunately.

    Jim Ringland . . . . . jtringl.smugmug.com
  • camnercamner Registered Users Posts: 109 Major grins

    Has @leftquark ever mentioned why SM doesn't give us the option of having a setting that would allow us to set the default Lightbox behavior to either (a) the current behavior, or (b) have the info display appear when the Lightbox is invoked? I would think it wouldn't be too hard to implement, and it would satisfy both the "I want my images to speak for themselves" folk as well as the "The title and caption are an integral part of my images so they should appear when the image appears" folk.

  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

    @camner said:
    Has @leftquark ever mentioned why SM doesn't give us the option of having a setting that would allow us to set the default Lightbox behavior to either (a) the current behavior, or (b) have the info display appear when the Lightbox is invoked? I would think it wouldn't be too hard to implement, and it would satisfy both the "I want my images to speak for themselves" folk as well as the "The title and caption are an integral part of my images so they should appear when the image appears" folk.

    Yes! Sadly, it's probably buried somewhere in this 7 page post. I'd love to take the Shop View setting (which we had called "Commerce Focused Lightbox" for a little while) and turn it into a broader setting that would let you select which view your Lightbox opened into (Shop, Comments, Sharing, Details, etc). For now we're working on higher priority items that we want to get done but it's definitely on my mind to come back and add one day.

    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
  • blouieblouie Registered Users Posts: 77 Big grins
    edited January 21, 2020

    As mentioned, my objective is to show captions but not show the Photo Details button. And I've tried the above mentioned code. However, probably other code is interfering. So here is the code I have now that perhaps is the interfering code:

    (1)

    /Hiding VIEW PHOTO DETAILS button from lightbox 2019 view/
    .sm-user-ui .sm-lightbox-v2-photo-buttons {
    display: none;
    }

    (2)

    .sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable {opacity: 1;}

    (3)

    .sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_fullscreen_button"],
    .sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_details_button"] {display: none;}

    .sm-user-ui .sm-lightbox-v2-hideable {opacity: 1 !important;}

    .sm-user-ui .sm-button.sm-button-nochrome[data-elem-id="lightbox_image_title"] {
    position: fixed;
    bottom: 20px;
    left: 20px;
    cursor: default;
    }

    .sm-user-ui .sm-button.sm-button-nochrome[data-elem-id="lightbox_image_title"] p {color: black;}

    When I disable (1) then I get the Photo Details button back and with the nasty shading over my images, etc. So I can't disable that.

    So I don't know which parts of (2) and (3) I should disable.

    Meanwhile I have:

    Auto Hide Captions = On

    Captions = On

  • camnercamner Registered Users Posts: 109 Major grins

    @leftquark said:

    @camner said:
    Has @leftquark ever mentioned why SM doesn't give us the option of having a setting that would allow us to set the default Lightbox behavior to either (a) the current behavior, or (b) have the info display appear when the Lightbox is invoked? I would think it wouldn't be too hard to implement, and it would satisfy both the "I want my images to speak for themselves" folk as well as the "The title and caption are an integral part of my images so they should appear when the image appears" folk.

    Yes! Sadly, it's probably buried somewhere in this 7 page post. I'd love to take the Shop View setting (which we had called "Commerce Focused Lightbox" for a little while) and turn it into a broader setting that would let you select which view your Lightbox opened into (Shop, Comments, Sharing, Details, etc). For now we're working on higher priority items that we want to get done but it's definitely on my mind to come back and add one day.

    That's wonderful! BUT, if "Shop View" is only available to Pro and Portfolio level users, then those of use on the Power plan are going to be SOL, right? Obviously that's a business decision for SM to make, but since Shop View is intended to help Pro and Portfolio level users drive their selling-prints business (and presumably those that use SM primarily as a sales platform are less likely to have captions, let alone prefer to have captions always showing), might SM consider making the option to show captions by default NOT be limited to those with higher level plans?

Sign In or Register to comment.