Conflict with touch events and Bootstrap modal

[dreadpiratebrown]

I'm having a strange issue with using this plugin in a Bootstrap modal. I have a product detail page with some thumbnail images. I want to launch a modal when a thumbnail is clicked, and the modal will display the first image at a large size and then the rest of the thumbnails, and the large image will have the zoom on it. If you hover (with a mouse) or touch a thumbnail, it changes the source of the large image but the zoom should stay the same.

I'm initiating the zoom() function on the shown.bs.modal event because I don't know when the images will be loaded into the modal.

Everything works fine with a mouse device, the zoom works without a hitch. But when I test on a touch device like an iPhone or Android phone, this is what happens:

1. The modal loads correctly.
2. The first large image does not zoom properly. If you touch it, it enlarges for a fraction of a second and then goes back to regular size and nothing else happens until you tap again.
3. If you touch a thumbnail, the large image source changes, and then the zoom works correctly.

Here is my code:

$('.product-images .thumbnails img').click(function() {
        $('#imagesModal').modal('show');
    });

    $('.image-zoom-modal .thumbnails img').mouseenter(function () {
        $('.image-zoom-modal .product-image-main').trigger('zoom.destroy');
        var target = $('.image-zoom-modal .product-image-main img');
        var src = $(this).attr('src');
        target.attr('src', src);
        $('.image-zoom-modal .product-image-main').zoom();
        $('.selected').removeClass('selected');
        $(this).addClass('selected');
    });

    $('#imagesModal').on('shown.bs.modal', function (e) {
        $('.image-zoom-modal .product-image-main').zoom();
    })