Bootstrap Blueimp gallery not opening modal in mobile resolutions

Question

I am using Blueimp Gallery Gallery in two areas in my Zend Framework 1 project. Although it works perfectly in one section I am having trouble with the other.

The problem section works on desktop resolutions but when I narrow my browser width to test mobile resolutions, clicking an image no longer opens the modal.

The only difference from the working code below is where the PHP loop that builds the modal contents is in a different div and section.

<div class="col-12 col-md-8">
    <section>
        //the php for each is inside a section.
    </section>
</div>

Could some one point out why this is causing problems?

The code from the working section is all in the body as shown below:

<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
    <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery blueimp-gallery-controls" data-use-bootstrap-modal="false">
        <!-- The container for the modal slides -->
        <div class="slides"></div>
        <!-- Controls for the borderless lightbox -->
        <h3 class="title"></h3>
        <a class="prev">‹</a>
        <a class="next">›</a>
        <a class="close">×</a>
        <a class="play-pause"></a>
        <ol class="indicator"></ol>
        <!-- The modal dialog, which will be used to wrap the lightbox content -->
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" aria-hidden="true">&times;</button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body next"></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left prev">
                            <i class="glyphicon glyphicon-chevron-left"></i>
                            Previous
                        </button>
                        <button type="button" class="btn btn-primary next">
                            Next
                            <i class="glyphicon glyphicon-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div id="photos">
    <?php if ($this->project['photos']): ?>
        <?php foreach ($this->project['photos'] as $photo): ?>    
            <div class="col-md-3 col-sm-4 col-xs-6">
                <a href="<?php echo $photo['resized'] ?>" class="item" title="<?php echo $photo['description'] ?>" data-gallery data-id="<?php echo $photo['id']; ?>">
                    <div class="thumb">
                        <img src="<?php echo $photo['src'] ?>" alt="<?php echo $photo['description'] ?>">
                        <div class="description">
                            <!-- leave space even if no description so each cell is of equal height-->
                            <span><?php echo isset($photo['description']) ? $photo['description'] : '&nbsp;&nbsp;'; ?>
                        </div>
                    </div>
                </a>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>    
</div>

    <script src="/js/common/jquery.blueimp-gallery.min.js"></script>
    <script src="/js/common/bootstrap-image-gallery.min.js"></script>

Answer 1

There is not enough information here for anyone to have offered a solution unless they recognised it from there own previous headache. This only became apparent after many hours of frustration.

This was a very annoying issue and the solution was trivial. When the resolution width was reduced the tags and address section were moved to the bottom of the page but their section starting point was right after the 'Project Photos' heading section. As a result they blocked all mouse events. Adjusting the z-index of the album container solved the problem.

The image helps illustrate what was happening and I hope my knuckled biting helps someone else out there.