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

Cropped fluidbox inside block with overflow:hidden #206

Open
Open
Cropped fluidbox inside block with overflow:hidden#206
@nixprosoft

Description

@nixprosoft
nixprosoft
opened on Nov 11, 2021

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();

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions