How Do I Remove the Tiny Preview Images from Lightbox?

[lm1280]

How Do I Remove the Tiny Preview Images from Lightbox?

When using “Lightbox” and I “Link” images it creates a row of tiny thumbnails (see image).

I still want to “link” my images but I don’t want the tiny preview images below the large image. Is there any way to remove these tiny thumbnails?

I know lot’s of other galleries allow you to click from image to image without having those tiny thumbnail images present. Is there a way to remove them.

[samliew (webflowexpert.com)]

Here’s the CSS needed to override all lightboxes on the page/site:

<style>
.w-lightbox-strip {
    display: none;
}
@media (min-width: 0px) {
    .w-lightbox-group {
        height: 100vh;
    }
}
</style>

Paste this in Site Settings > Custom Code > Footer Code

[lm1280]

Thanks. I pasted the code, saved the page and did a refresh of the browser but the tiny preview thumbnails are still there.

[samliew (webflowexpert.com)]

You need to republish too.

[lm1280]

I am not ready to publish my site yet but was hoping to be able to see the changes. Shouldn’t the changes be visible from the Webflow Dashboard using Preview?

[samliew (webflowexpert.com)]

Custom Code will not show. If you want you can use an embed component, but you need to copy it on all the pages.

[lm1280]

Ok, thanks. So I just want to see the changes (if possible) in preview. Will an Embed Component allow this. Can you tell me how to do that?

[lm1280]

I figured it out and it worked great. Thanks Samliew.

[lm1280]

Actually, Samliew before this thread is closed there’s one small thing I’d like to fix is now that the tiny preview images are gone. The full-size lightbox images sit higher because the tiny preview images were below them, but now that the preview images are gone the full-size lightbox images sit too high and look kind of weird. they are not centered on the page.

Is there some code I can use to make all full-size lightbox images be centered on the page.

img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

[samliew (webflowexpert.com)]

Change

@media (min-width: 768px) {
    .w-lightbox-group {
        height: 100vh;
    }
}

to

@media (min-width: 0px) {
    .w-lightbox-group {
        height: 100vh;
    }
}