Streaming live at 10am (PST)

Hide Lightbox Thumbnails


#1

Webflow folks. Please give me the option to hide the thumbnails in the lightbox. Thank you.


[LIGHTBOX] Show/Hide lightbox thumbnails
#2

You mean, to have a text link instead? You just need to pass the thumbnail to Display:none after having added a class name to it. Also ad a text.

See here how I do it https://v.usetapes.com/0cJdex1AyJ


#3

Thanks @vincent. But what I referring to are the thumbnails that show underneath the large images inside the lightbox. Not the actual lightbox thumbnail itself.


#4

Sorry smile

You can't in Webflow yet, but add the following code to your <head> section in the Custom Code section of your site's admin and the thumbs won't appear.

<style>.w-lightbox-thumbnail{display:none;}</style>


#5

Ah. That's Perfect. Thank you!


#6

You can use right-clic + inspect element in Chrome, to get the class name of the element and write your own CSS. Useful for elements you can't style in Webflow yet.

Here I targeted the Lightbox right arrow


#7

Well, @vincent thanks for the help on that but unfortunately it doesn't work as well as I hoped. While it does remove the thumbnails, it still leaves the space at the button that was used to show thumbnails.

I'm needing to find a way to hide the thumbnail images and have the large lightbox images fill the screen the same way it does when you only have one image in a lightbox.

Any thoughts?... Or am I back to asking the WebFlow guys to PLEASE give me a Hide Thumbnails option?


#8

OK I hacked something together that seems to work by adding this to the <head> custom code area:

<style>
    .loader { display: block; }
    .w-lightbox-strip {display:none;}
    .w-lightbox-group,.w-lightbox-group .w-lightbox-view {height:98%}
    .w-lightbox-group .w-lightbox-image{max-width:82.3vw;max-height:98%}
</style>

I feel like i'm targeting way to many classes and there is probably a simpler method...but it seems to work.

Anyone out there that can confirm that this is the best code to use?

thanks


#9

crap... never-mind... that actually doesn't work... Anyone know what code i would use to achieve this??


#10

Okaaaay so

<style>
.w-lightbox-strip {display: none;}
.w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
height: 100%;
.w-lightbox-content {margin-top: 0;}
</style>

Please test that for all media querys


#11

Thanks @vincent. That seems to have done the trick!


#12

@vincent... Revisiting this topic for a moment. This does seem to work fine for the most part, but i can't seem to get it to center vertically on tablets, mobile, landscape. The lightbox image still shows towards the top of the screen, apparently still accounting for the spaced used for the thumbnails.

@thesergie... wouldn't it be a fairly easy feature to add a Show/Hide thumbnails checkbox to the lightbox widget?


#13

if Vincent's around....

I've set up this test site

any ideas how I get some sort of navigation for the Gallery thumbnails (click to enter on the page above). Works great on a tablet or phone, just touch to move the icons along, but on a PC or Laptop only the left/right arrows move along the icons (nothing seems to scroll them).

any ideas?


#14