简体   繁体   中英

Jquery the event doesn't work the second time i call it

I have a page with an image gallery, and i am using jquery wookmark plugin, with filtering. Then i wanted to use also the plugin colorbox (wich wookmark already provides as an example in their plugin), and i was able to join the colorbox and the filter system. The issue in my head was, and when i aplly a filter, and instead of 50 photos to show, only have 5 visible, how do i say to colorbox to only show those 5?

So i initialize colorbox like this:

    $('li a').colorbox({
         rel: 'lightbox', scalePhotos: true, maxWidth: '80%', maxHeight: '80%'
    });

Then on the click event of the filters, i thought the best way was to, whenever there was a click, remove colorbox from all images, and initialize colorbox again only for item inside li with active class, like this:

    var onClickFilter = function(event) {

      var item = $(event.currentTarget), activeFilters = [];
      item.toggleClass('active');

      // Collect active filter strings
      filters.filter('.active').each(function() {
        activeFilters.push($(this).data('filter'));
      });

      handler.wookmarkInstance.filter(activeFilters, 'or');       

  //here i remove colorbox from every item
      $.colorbox.remove();        

      //here i instantiate colorbox for active item 
  $('#tiles li.active a').colorbox({
        rel: 'lightbox', scalePhotos: true, maxWidth: '80%', maxHeight: '80%'
      });
    }

And this kinda works! Example, I load the page with 100 images, the colorbox gallery shows 100 images to show; i click a filter and i get 10 images visible, colorbox gives 10 images to show, i click another filter to add some more images, i get 24 images visible, colorbox refreshes it's gallery to 24. The thing is, if i click again on the same last filter to deactivate it, colorbox no longer see just 10 images but 24.

Well, actually what i posted is correct. If someone would like to use it, i'm glad to help. But i found that my issue was not the one i described.

Wookmark plugin, only adds and removes class inactive. So in wookmark's js, i was not removing class active when the item were inactive. They we're staying with both classes, and since active has no properties i wasn't seeing that. Thanks for helping (brainstorming)...

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM