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

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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