Streaming live at 10am (PST)

How Do I Remove the Tiny Preview Images from Lightbox?

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.

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

1 Like

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

You need to republish too.

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?

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

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?

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

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

Change

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

to

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

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.