How to get rid of "View Photo Details" overlay on photos in Lightbox?

npudarnpudar Registered Users Posts: 39 Big grins
edited August 16, 2019 in SmugMug Customization

I believe I have searched through all of the options in Settings, and have looked through the Customizations. I can't seem to find any way to get rid of the "View Photo Details" photo overlay in the Lightbox. It is in the lower left corner of all my Lightbox photos as shown in the image. Any recommendations?
(I want to keep the View Photo Details button in the toolbar menu -- I just don't want the overlay text to always be on the photos in the lower left corner.)
Thanks,
Nick

Comments

  • RichardRichard Administrators, Vanilla Admin Posts: 19,893 moderator

    +1

  • RonvanderPlasRonvanderPlas Registered Users Posts: 22 Big grins

    +1 Count me in.
    The overlay is not necessary because the hamburger menu icon gives the same result. If there's a title it's ok but otherwise just hide it to get a 'clean' picture.

  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins

    This should get rid of the "display details" button and text over your photo, but leaves the button in the sidebar

    .sm-button.sm-button-nochrome.sm-button-size-large.sm-button-skin-none.sm-lightbox-v2-photo-title.sm-lightbox-v2-hide-landscape.sm-flex-justify-start {
        display: none;
    }
    
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • RichardRichard Administrators, Vanilla Admin Posts: 19,893 moderator

    Thanks Lille--worked perfectly.

  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins

    You are welcome, @Richard :)

    https://www.lilleulven.smugmug.com - The Photos of my travels
  • npudarnpudar Registered Users Posts: 39 Big grins

    @Lille Ulven said:
    This should get rid of the "display details" button and text over your photo, but leaves the button in the sidebar

    .sm-button.sm-button-nochrome.sm-button-size-large.sm-button-skin-none.sm-lightbox-v2-photo-title.sm-lightbox-v2-hide-landscape.sm-flex-justify-start {
      display: none;
    }
    

    @Lille Ulven Fantastic! Thank you so much!
    Nick

  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited August 17, 2019

    Thanks, immediately added.
    Instead of hiding, if we could change it to photo position in gallery, xx / xxx, it would be great.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • npudarnpudar Registered Users Posts: 39 Big grins
    edited August 17, 2019

    @Lille Ulven I just implemented the code, and it removes the text from the bottom -- but it did not retain the button in the sidebar. I'm wondering if others are experience the same result?
    Thanks,
    Nick

  • James LyallJames Lyall Registered Users Posts: 202 Major grins

    Thank you, a great improvement.
    What about a MAP button in the lightbox for geotagged photographs?

  • RichardRichard Administrators, Vanilla Admin Posts: 19,893 moderator

    @npudar : The sidebar button was not affected by the change in Chrome and Firefox. Dunno.

  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins

    @npudar could you give me a link to your website, so I can have a look, why the button vanishes in your sidebar as well?

    @James Lyall thank you :) - @leftquark said the map would come back potentially early next week if I remember correctly, I suspect that will also give you a map button in the lightbox.

    @Allen, I don't quite understand what you mean by "if we could change it to photo position in gallery, xx / xxx, it would be great." - there is a code from @leftquark somewhere to move it below the photo:

    8. Render title and buy button below image on desktop
    & tablet landscape viewports.
    
    @media screen and (min-width: 961px) {
        .sm-user-ui .sm-lightbox-v2-content {
            height: calc(100% - 72px);
        }
    
        .sm-user-ui .sm-lightbox-v2-photo-buttons {
            padding: 0;
            bottom: -60px;
        }
    
        .sm-user-ui .sm-lightbox-v2-photo-buttons-scrim {
            background: none;
        }
    }
    

    otherwise, if you can explain to me what you mean, I will have a look (though I am not a webdev per definition, I just love doing it :D )

    https://www.lilleulven.smugmug.com - The Photos of my travels
  • npudarnpudar Registered Users Posts: 39 Big grins
    edited August 17, 2019

    @Lille Ulven My site is photos.pudar.com
    Although here is a easier gallery link where I started having issues: Pitre Paragons

    Thanks!

  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins

    @npudar I have had a look, what I can see is that the HTML code for that button is missing on your site (at least the Pitre Paragons), and that should not vanish only because you tell the CSS to not show it.
    Even if I comment out (in firefox web dev) the code for hiding the button from the top of your photo, it does not show up again.
    So I believe, there is more to it, than what I can see (or rather for what I have the knowledge of fixing).

    I'd say send an email to the heroes, maybe they are able to figure out what is going on.

    Sorry, I am of no help here.

    https://www.lilleulven.smugmug.com - The Photos of my travels
  • npudarnpudar Registered Users Posts: 39 Big grins

    @Lille Ulven Thank you for all your assistance -- it is very much appreciated! I will reach out to the heroes.
    Best regards,
    Nick

  • npudarnpudar Registered Users Posts: 39 Big grins
    edited August 19, 2019

    Hero Tom provided the CSS code that worked for my site:

    /*** Removes 'Display Details from bottom of Lightbox'
    ***************************************************/
    .sm-user-ui .sm-lightbox-v2-photo-buttons .sm-button {
      display: none;
    }
    

    This code removes the text overlay, but keeps the hamburger icon in the toolbar for me.

    Nick

  • vadbvadb Registered Users Posts: 4 Big grins
    Before I found this topic, I made it working for myself using this code:

    span[class="sm-button-label sm-label-large sm-text-ellipsis"],
    span[class="sm-button-label sm-label-small sm-text-ellipsis"]{
    display: none;
    }


    (Sorry for the lack of formatting, I'm new on this forum and AFAIU is not allowed yet to use the full editor...)
  • khalexkhalex Registered Users Posts: 1 Beginner grinner
    Hi guys!

    The solution helped me. Thank you! But now I cannot see a caption (if it is not empty) too.
    Is there a code to force showing the text overlay (better for a specified timeout) for a non-empty text and do not show one if there is nothing to show?
    It would be cool to have it working both on mobile and on desktop versions.

    Thank you in advance!
  • The MechanicThe Mechanic Registered Users Posts: 197 Major grins

    @khalex

    Here is a link with some code that targets the View Details Icon and Text Specifically

    https://smugocity.com/customization-toolbox/smugmug-lightbox-v2/remove-view-details/

    This will only affect those two items and are more specific then the mentions above in this thread. It will not change the display of title/caption if they exist.

    Here is an option to make the title/caption pop up static and display all the time:

    https://smugocity.com/customization-toolbox/smugmug-lightbox-v2/static-title-caption-lightbox/

    FYI: You will likely need to remove or comment out all of the old css related to these changes. Also, Never a bad plan to copy and paste that code into a word doc to keep your own notes and for safe keeping.

    This should help, let me know

Sign In or Register to comment.