Quicksand.js interfering with Bootstrap Modals

Question

I've been trying to make a lightbox portfolio using the Bootstrap Modal functions, with the quicksand sorting plug-in. I originally followed this tutorial which I had to work with a little to get to work in Bootstrap 3.0.0 (the version I'm using), but it was working. I decided I needed more control over the modal boxes so I took out the bootbox plug-in and just used the modal js that comes in bootstrap. Now when I press the thumbnail the modal box pops up fine, but if I press one of the sorting nav buttons, the box will pop up with either the last image that was in the modal (not the correct one) or if the first thing you do is sort then click, the modal box pops up but it is empty. The tutorial mentioned the problem and a work-around:

"Inherently, Quicksand will nullify Bootstrap's modal feature as soon as you interact with any of the categories. That is, the modal works before firing Quicksand, but not after. However, we've easily avoided this issue by defining our Bootbox function earlier. As shown above, we then used “gallery” as an attribute inside the quicksand() function and setup $(document).ready(gallery);. Now modal will work as expected both before and after selecting a filter/category."

but it doesn't seem to work with the normal bootstrap modal. The only similar question I could find is this one , the answer was to add a call-back, since the objects sorted by quicksand are actually new objects that have not been affected by the modal script, but when I added the callback it didn't work.

here is my code (I left out all the other thumbnails)

    <div class="container well well-lg">
<ul class="filter nav nav-pills">
    <li data-value="all"><a href="#"><h6>All</h6></a></li>
    <li data-value="Historical"><a href="#"><h6>Historical</h6></a></li>
    ...
</ul>

<hr>
<ul class="thumbnails">
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" data-id="id-1" data-type="Historical">
        <a class="thumbnail" data-toggle="modal" data-target="#myModal" id="joan1" href="#" data-image-id="" data-title="Joan of Arc" data-caption="Digital, Junior Thesis subject Crime and Punishment, 2015" data-image="/images/joan1.png">
           <img alt="" src="/images/thumb_joan1.png"></a>
    </li>
    ...
</ul>

</div>

<!-- Modal -->
<div class="modal modal-wide fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h3 class="modal-title" id="myModal-title"></h3>
        </div>
        <div class="modal-body">
            <img id="myModal-image" class="img-responsive" src="">
        </div>
        <div class="modal-footer">
            <div class="col-md-2">
                <button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
            </div>

            <div class="col-md-8 text-justify" id="myModal-caption">

            </div>

            <div class="col-md-2">
                <button type="button" id="show-next-image" class="btn btn-default">Next</button>
            </div>
        </div>
    </div>
</div>
</div>

and here is my javascript

<script src="/Scripts/jquery.quicksand.js" type="text/javascript"></script>

<script>

    $(document).ready(function () {

        loadGallery(true, 'a.thumbnail');

        $(".modal-wide").on("show.bs.modal", function () {
            var height = $(window).height() - 200;
            $(this).find(".modal-body").css("max-height", height);
        });

        function disableButtons(counter_max, counter_current) {

            $('#show-previous-image, #show-next-image').show();
            if (counter_max == counter_current) {
                $('#show-next-image').hide();
            } else if (counter_current == 1) {
                $('#show-previous-image').hide();
            }
        }

        function loadGallery(setIDs, setClickAttr) {
            var current_image,
                selector,
                counter = 0;

            $('#show-next-image, #show-previous-image').click(function () {
                if ($(this).attr('id') == 'show-previous-image') {
                    current_image--;
                } else {
                    current_image++;
                }

                selector = $('[data-image-id="' + current_image + '"]');
                updateGallery(selector);
            });

            function updateGallery(selector) {
                var $sel = selector;
                current_image = $sel.data('image-id');
                $('#myModal-caption').text($sel.data('caption'));
                $('#myModal-title').text($sel.data('title'));
                $('#myModal-image').attr('src', $sel.data('image'));
                disableButtons(counter, $sel.data('image-id'));
            }

            if (setIDs == true) {
                $('[data-image-id]').each(function () {
                    counter++;
                    $(this).attr('data-image-id', counter);
                });
            }
            $(setClickAttr).on('click', function () {
                updateGallery($(this));
            });
        };


        function gallery() {

        }
        var $itemsHolder = $('ul.thumbnails');
        var $itemsClone = $itemsHolder.clone();
        var $filterClass = "";
        $('ul.filter li').click(function (e) {
            e.preventDefault();
            $filterClass = $(this).attr('data-value');
            if ($filterClass == 'all') { var $filters =              $itemsClone.find('li'); }
            else { var $filters = $itemsClone.find('li[data-type=' +   $filterClass + ']'); }
            $itemsHolder.quicksand(
              $filters,
              { duration: 1000 },
              loadGallery
              );
        });
    });
    $holder.quicksand($filteredData, {
        duration: 800,
        easing: 'easeInOutQuad'
    }, gallery);
    $(document).ready(gallery);
</script>

and here is the live page where you can see the problem. I'm pretty new to this so hopefully I just messed up something basic and fixable. Thanks in advance for any help!

Answer 1

Hi your thumbnail click event does not trigger after filtering, when filtering you are creating a clone of the elements and adding them to back to the DOM, Therefore your trying to bind a click event to elements that are not on the page yet, to fix bind to an element that's is always on the page, then use your variable 'setClickAttr' for the Selector filter

ie change

$(setClickAttr).on('click', function () {
    ....
});

to

$(document).on('click', setClickAttr, function() {
    ....
});

This Turning live() into on() in jQuery talks more about binding to elements that must exist first