i've been trying make lightbox portfolio using bootstrap modal functions, quicksand sorting plug-in. followed this tutorial had work little work in bootstrap 3.0.0 (the version i'm using), working. decided needed more control on modal boxes took out bootbox plug-in , used modal js comes in bootstrap. when press thumbnail modal box pops fine, if press 1 of sorting nav buttons, box pop either last image in modal (not correct one) or if first thing sort click, modal box pops empty. tutorial mentioned problem , work-around:
"inherently, quicksand nullify bootstrap’s modal feature interact of categories. is, modal works before firing quicksand, not after. however, we’ve avoided issue defining our bootbox function earlier. shown above, used “gallery” attribute inside quicksand() function , setup $(document).ready(gallery);. modal work expected both before , after selecting filter/category."
but doesn't seem work normal bootstrap modal. similar question find this one, answer add call-back, since objects sorted quicksand new objects have not been affected modal script, when added callback didn't work.
here code (i left out other thumbnails)
<div class="container 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 , 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">×</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 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 live page can see problem. i'm pretty new messed basic , fixable. in advance help!
hi thumbnail click event not trigger after filtering, when filtering creating clone of elements , adding them dom, therefore trying bind click event elements not on page yet, fix bind element that's on page, use variable 'setclickattr' selector filter
i.e change
$(setclickattr).on('click', function () { .... }); to
$(document).on('click', setclickattr, function() { .... }); this turning live() on() in jquery talks more binding elements must exist first
Comments
Post a Comment