CODEWITHSUNDEEP
javascripthtmlblueimp
Jammer
Jammer

Reputation: 2420

blueimp Gallery adding delete button under images always opens gallery

I'm trying to add a delete button under my list of images that will delete the selected image from the gallery using Ajax.

The issue I’m having is that whenever the delete button is clicked it opens the gallery of images, the script below opens the gallery, which is opened when clicked inside of the 'links' div. So this is still initiating when I click on the Delete button but I’ve can’t seem to find away around it.

Script

document.getElementById('links').onclick = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement,
        link = target.src ? target.parentNode : target.parentNode,
        options = { index: link, event: event },
        links = this.getElementsByClassName('image');
    blueimp.Gallery(links, options);
};

Html

<div id="links">
        <div class="property-image">
            <a class="image" href="6e575f42-1da8-4da0-bf84-7752930aea75.JPG">
                <img src=" 6e575f42-1da8-4da0-bf84-7752930aea75.JPG">
            </a>
            <a class="btn btn-danger delete-confirm-ajax close" data-ajax="true" data-id="72758" href=" ">Delete</a>
        </div>
</div>

Upvotes: 0

Views: 1528

Answers (2)

Isaac
Isaac

Reputation: 99

patricia's answer will remove the functionality of the blueimp Gallery, didn't you notice you're not able to swipe to the next photo or close the modal?

Here is the completed solution https://jsfiddle.net/dfhjruft/, I'm using if else statement to detect whether is it button clicked or not.

Upvotes: 0

patricia
patricia

Reputation: 1103

I think I solved your problem, at least in the fiddle it works:

https://jsfiddle.net/c5kbwqm0/2/

All I did was to focus the click event in the element <a></a> instead of the whole <div></div>.

Upvotes: 1

Related Questions