Help with formatting ekko lightbox

HTML & CSS
1

I’m trying unsuccessfully to make the echo Lightbox when it’s expanded take up more of the screen (about 80% would be nice). There is also an odd behavior when you click the tiny arrows to cycle to the next image. It’s like it’s sliding the next image in from below and resizes the entire box for a second. Has anyone had any luck making this lightbox more usable?

Here is a link to the dev site:
Dev Site

Any ideas? Any help would be greatly appreciated.

2

I’m guessing that the width options are probably something that you have to set up in the settings of the plugin itself.

You can over-ride with the following code but it’s probably not the right way to do it.

@media (min-width: 678px) {

    .modal-dialog {
        width: 80%;
        margin: 30px auto;
    }
    .ekko-lightbox-container {
        height: auto!important;
    }
    .ekko-lightbox-item.fade:not(.show) {
        position: absolute;
    }
}

Add that code after all the existing css otherwise it will be over-written by the original styles.

I’m not very keen on how that plugin works but I guess as the images are not cached then there will always be a delay before the next image loads so a jump of sorts is unavoidable.

3

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