Docs

[BradleyB]

Hi,

I am working on a page that loads HTML in a lightbox. I would like to do the following with the control buttons(the fullscreen and close buttons):

1) Move them so that they are aligned with the top of the lightbox screen and closer to its left.

2) remove the ‘fullscreen’ option, so that the only option is to close the lightbox.

Thanks so much!

[BradleyB]

This reply has been marked as private.

[Nabeel A]

Hi there,

Thanks for writing in!

1. To move the button closer to the lightbox, you can add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.ilightbox-toolbar.light {
    top: 6px !important;
    left: 16% !important;
}

2. To hide the fullscreen button, you can add this code in your Customizer:

.ilightbox-fullscreen {
    display: none !important;
}

Let us know how this goes!

[BradleyB]

Thank you! When I resize the browser, the button overlaps the lightbox screen? Is there a way to place the close button relative to the screen, so it is always in the same position relative to the lightbox screen?

[Rue Nel]

Hello There,

Thanks for updating in! To place the close button relative to the screen so it is always in the same position relative to the lightbox screen, please have the code updated and use this instead:

.ilightbox-toolbar.light {
    top: 20px !important;
    left: 20px !important;
}

Please feel free to increase the increase number to have the button position at the desired top left position in your browser screen.

Please let us know how it goes.

[BradleyB]

Thanks for your reply!

However, I am still having some issues with this page.

1) The code you provided did not solve the problem. I would like the close button “pinned” to the upper right of the lighbox page. I want it to stay in the upper right of the page no matter how the browser is resized. How can I accomplish this?

2) The ligthbox pages are displaying twice. If you are inside one of the lightboxes and press the ‘right’ arrow, it takes you to a duplicate of the page. How can I fix this?

Thanks so much!

[BradleyB]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating in!

1] To make the close button stay in the upper right of the page no matter how the browser is resized, please update the code and use this instead:

.ilightbox-toolbar.light {
    top: 20px !important;
    right: 20px !important;
    left: auto !important;
}

2] Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

[BradleyB]

Thanks for your reply!

A couple things:

1) I applies the code you provided, and it worked to “pin” the “close button.” However, I may have asked for the wrong thing. Now, it is the lightbox container that is moving around. I want the “close button” to move relative to the container, so it stays in the upper right corner of the container no matter how the browser is resized.

2) Sorry for the confusion. Below is a picture of the problem. When you are inside the lightbox, each page is being displayed twice in a gallery ( You can only see it if the browser is sized very small, or you press the right “arrow” key. I want to disable this.

Again, thanks so much!

[Rue Nel]

Hello Again,

1] The close button can only be pin in the upper right or upper left corner of the lightbox. It is already set to move relative to the content container. It may look like it isn’t relative because in your container, there is an iframe which is set only to have a maximum width of 1000 pixels.

2] This is what I see in your site: http://prntscr.com/df2wtw
Please try to use private browsing mode or logged out first before testing your site.

Please let us know how it goes.

[BradleyB]

Thanks for your reply. As per the second item, I am still seeing the duplicate page, even when logged out. It is only visible when the browser is small. I have attached another screen shot. The page is displaying twice in gallery. How can I remove this? Thanks again!

[Christopher]

Hi there,

I don’t see duplicated content, please see the attachment.
Please clear cache and check again or let us know how we can replicate the issue.

Thanks.

[BradleyB]

Thanks for your reply! I was able to fix the issue – I was using the same lightbox selector in multiple instances.

I am still struggling with the functionality of closing the lightbox, though.

1) I want to make it so that clicking anywhere outside of the lightbox container will exit the lightbox. As it is, clicking to the left or right of the container doesn’t do this. I understand that this is because its a transparent container to the left and right. Is there anyway around this or to fix this?

2) Also, is there a way to “attach” the close button to the container, so that they move together? An example of this can be found at: http://fancybox.net/ Scroll down to Examples and click the first one.

Thanks so much! Your help is GREATLY appreciated!

[Lely]

Hi Bradley,

1.) Please use this custom CSS:

.ilightbox-holder.light {
    margin-left: 15%;
    max-width: 70%;
}

You may combine the following custom CSS and above update :

.ilightbox-holder.light {
    box-shadow: none !important;
}
.ilightbox-holder.light {
    background-color: transparent;
}
.ilightbox-holder.light {
    padding: 0;
}

To just this:

.ilightbox-holder.light {
    box-shadow: none !important;
    background-color: transparent;
    padding: 0;
    margin-left: 15%;
    max-width: 70%;
}

Then remove this:

.ilightbox-container > iframe {
    display: block;
    margin: 0 auto;
    max-width: 1000px;
}

2.) Update this part:

.ilightbox-toolbar.light {
    top: 41px !important;
    left: 45px !important;
    right: auto!important;
}

To this:

.ilightbox-toolbar.light {
    top: 41px !important;
    left: 15% !important;
    right: auto!important;

}

Hope this helps.

[BradleyB]

Thanks for the reply. That helped with the close button.

However, not the lightbox container extends off the right side of the browser. How can I center it? Thanks!

[Author]

Posts