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

npudar

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

Richard

+1

RonvanderPlas

+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 Ulven

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;
}

Richard

Thanks Lille--worked perfectly.

Lille Ulven

You are welcome, @Richard

npudar

@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

Allen

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

npudar

@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 Lyall

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

Richard

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

Lille Ulven

@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 )

npudar

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

Thanks!

Lille Ulven

@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.

npudar

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

npudar

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

vadb

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...)

khalex

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 Mechanic

@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