How to place a <form> inside a gallery?

[Superheld]

Hi!

I have a nice working gallery and want to add a little form inside do add a button for delete a picture.

This is what I have. It works but the form does open the lightbox as well and did not the form-action. It seems that lighbox catches every click inside, right?

`

                    <a class="image-tile col-xl-3 col-lg-3 col-md-3 col-md-4 col-6" href="/<?= $img->path ?>/<?= $img->name ?>">
                        <img alt="" src="/<?= $img->path ?>/<?= $img->name ?>" class="img-fluid" />
                    </a>
                    <form action="/" onsubmit="return confirm('<?= lang('Aq.RemovePop'); ?>');">
                        <input type="hidden" name="img_id" value="<?= $img->id ?>">
                        <input type="button" name="todo" value="-" class="btn btn-danger">
                    </form>

                </div>

`

Image and form is a loop actually.

Is it possible to add such a function inside a lightbox?

Thank you!

[Superheld]

Oh, there is a 'div id="ligtbox"' above my code which is missing here... :) Trust me, it works well, only the form-button not.

[sachinchoolur]

Hey,

You can use the selector setting to select only .image-tile as lightGallery item
Docs - https://www.lightgalleryjs.com/docs/settings/#selector

lightGallery(document.getElementById('ligtbox'), {
    selector: '.image-tile'
})

Let me know if it resolves the issue

[Superheld]

Hey and thank you. I'm not that deep in JS, so I can't describe whats happen. I have the images and forms wrapped in a div with an id "lightgallery". Everything inside is interpreted as an image. If I click one, it opens the gallery and every 2nd element is a missing image (image, form, image, form, >> image, missing, image, missing). Even with this selector. AS I say, I'm not deep in JS, so I haven't figured out jet, what I have to change too ;-)

But: Shouldn't the "getElementById" changed too and points to the images instead a wrapped div?

[sachinchoolur]

SInce you have form element along with images, you need to use the selector setting. Otherwise, ligtGalelry will consider form element as a gallery item.

Please paste your HTML markup and lightGallery initialization code. I'll suggest a solution

[Superheld]

Hi! Wow, that's nice. And yes, it does interpret form as an element ;)

This is my latest code:

And this at the bottom of the body

<script type="text/javascript">
    lightGallery(document.getElementById('lightgallery'), {
        selector: '.image-tile'
    });
</script>

It's just the latest version, I didn't check what is now doing. Just copy&paste ;-) And sorry for the long time to reply, I do only work on the weekend on this project.

BR!