terrymun/Fluidbox

Cropped fluidbox inside block with overflow:hidden

Opened this issue · 0 comments

nixprosoft commented

When images inside bootstrap modal, for example,

fluidbox-inside-modal

then clicked image crops like that (canvas limited by block overflow restrictions):

fluidbox-cropped

When overflow:hidden of block was removed, then:

fluidbox-overflow-removed

If there any method to change fluidbox overlay placement to <body>, for example? Or any block outside modal?

Full HTML:

<div class="modal fade" tabindex="-1" aria-hidden="true" id="modal-3" aria-labelledby="modal-3-label">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content rounded-0 border-4 border-warning">
            <div class="modal-body text-center">
                <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="p-5">
                    <h5 class="text-center display-4" id="modal-3-label">Навес 6х6</h5>
                    <div class="row">
                        <div class="col-lg">
                            <a href="/img/naves6x6_big.jpeg" class="lightbox">
                                <img src="/img/naves6x6.jpeg" class="img-fluid" alt="">
                            </a>
                        </div>
                        <div class="col-lg">
                            <a href="/img/naves6x6hb_big.jpeg" class="lightbox">
                                <img src="/img/naves6x6hb.jpeg" class="img-fluid" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

And JS was:

$('.lightbox').fluidbox();