Skip to content
This repository has been archived by the owner on Nov 21, 2023. It is now read-only.

Cropped fluidbox inside block with overflow:hidden #206

Open
nixprosoft opened this issue Nov 11, 2021 · 0 comments
Open

Cropped fluidbox inside block with overflow:hidden #206

nixprosoft opened this issue Nov 11, 2021 · 0 comments

Comments

@nixprosoft
Copy link

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();
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@nixprosoft