How to customize the lightbox?

⚠️ This article was created for developers!

To be able to follow the steps, you're required to have coding knowledge. If you're not a developer and can't achieve what you're looking for, consider hiring a developer.

Make sure to carefully follow the tutorial and write correct code. We're unable to provide help with custom coding, or the possible issues that are happening because of them.

In this article

To customize the lightbox, you need CSS knowledge, otherwise you won't be able to achieve what you are looking for. You should inspect the codes of the lightbox, write custom CSS codes which you could put to your theme's CSS file, or to the Slider settings → Developer → CSS.

Lightbox CSS codes people commonly want to modify

If you want to modify any values from these CSS codes, just replace their values, write !important next to this new value, and paste that code into a CSS file, which is loading on your website. In WordPress your theme's style.css file and in Joomla one of the CSS files from your template.

Example of a modified code:
.litebox-overlay{
    background-color: red!important;
}

*[data-lightbox-image], *[data-n2-lightbox-urls], *[data-n2-lightbox] {
   cursor: hand!important;
   cursor: pointer!important;
}
Background color
.litebox-overlay{
    background-color: rgba(0, 0, 0, 0.8);
}
Closing X icon size, image, position
.litebox-overlay .litebox-close{
    width: 36px;
    height: 36px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAABGdBT…vNcsmRuX4vc8d6dD9cGMVFL231VGoNUdfFRq2y/t8SS7NvNfRFXoyOLJ8AAAAASUVORK5CYII=) no-repeat center;
    top: 20px;
    right: 20px;
}
Left arrow image, horizontal position
.litebox-overlay .litebox-prev {
    background: url(../images/litebox-prev.png) no-repeat center;
    left: 20px;
}
Right arrow image, horizontal position
.litebox-overlay .litebox-next {
    background: url(../images/litebox-next.png) no-repeat center;
    right: 20px;
}
Both arrow size, vertical position, opacity
.litebox-overlay .litebox-nav {
    width: 60px;
    height: 60px;
    margin-top: -30px;
    opacity: .2;
    top: 50%;
}
Lightbox image container position
.litebox-overlay .litebox-container {
    top: 10%;
    right: 10%;
    bottom: 10%;
    left: 10%;
}
Lightbox image maximum width and height to keep it inside the container
.litebox-overlay iframe, .litebox-overlay img {
    max-width: 100%;
    max-height: 100%;
}
Cursor
*[data-lightbox-image], *[data-n2-lightbox-urls], *[data-n2-lightbox] {
    cursor: zoom-in;
}
Loading animation
.litebox-overlay .litebox-loader {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 20px;
    top: 20px;
    border: 3px solid #111;
    border-right-color: #fff;
    border-radius: 50%;
    -webkit-animation: liteboxLoader 1s linear infinite;
    -moz-animation: liteboxLoader 1s linear infinite;
    -ms-animation: liteboxLoader 1s linear infinite;
    -o-animation: liteboxLoader 1s linear infinite;
    animation: liteboxLoader 1s linear infinite;
}
Lightbox caption
.litebox-overlay .litebox-text {
    width: 100%;
    padding: 0 15px;
    background: rgba(0,0,0,.5);
    color: #fff;
    font-size: 12px;
    line-height: 50px;
    position: absolute;
    bottom: 0;
    z-index: 2;
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

If you want to modify something else use your browser's developer tools to see how you can inspect elements, find the element you want to modify, and create your custom css codes.

How to apply codes to desktop or tablet or mobile only?

Use media queries.

How to make the close button appear on mobile?

The close button is hidden on mobile to improve the user experience. If you want to bring them back, you can use custom CSS.

@media only screen and (max-width: 479px){
    div.litebox-overlay .litebox-close {
        display: block;
    }
}
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.