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.