OiNutter / guggenheim.js

Framework agnostic gallery plugin with flashy filtering and re-ordering.

Home Page:https://oinutter.co.uk/guggenheim.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Filter function issue

macsupport opened this issue · comments

I am using guggenheim in a project as well as your pagination plugin. They work well together but I am having an issue with filtering. I have set up a dropdown list to filter the gallery items but when I select the specific filter, only a few of the selected items are filtered, not all, and when items on different paginated pages are filtered, they are distributed over a number of the paginated pages with blank pages in between.
Here is what is happening Demo

My filter is set up as follows

var gallery = guggenheim('#basic-gallery',{
width: 900,height:720,rows:4, cols:5, easing:'ease', duration: 0.4
 });
 var pagination = paginate('#pagination',gallery,{showDots:true,
        limitButtons: true,
        fastForwardButtons:false,
        numPagesToShow:5,
        start:1,
        showSinglePage:false, 
        onChange: function(page){},
        numPagesFunc: 'numPages',
        navFunc: 'jumpTo',
        resetFuncs: ['filter','reset']});

$('#filters a.list').on( 'click', function( event ) {
  var filters = $(this).attr('data-filter');
  gallery.filter(filters);
});

and my dropddown like this:

<ul id="filters" class="dropdown-menu">
     <li> <a id="showall" href="#">Show all</a></li>
     <li><a href="#" class="list" title="Show folders" data-filter="Folder"><i class="fa fa-folder-open fa-lg"></i> Folders</a></li>
     <li><a href="#" class="list" title="Show Videos" data-filter="Video"><i class="fa fa-film fa-lg"></i> Video</a></li>   
<li><a href="#" class="list" data-filter="Red">Red</a></li>
<li><a href="#" class="list" data-filter="Blue">Blue</a></li>
<li><a href="#" class="list" data-filter="Web">Web</a></li>
<li><a href="#" class="list" data-filter="Africa">Africa</a></li>
<li><a href="#" class="list" data-filter="Yosemite">Yosemite</a></li>
<li><a href="#" class="list" data-filter="Flowers">Flowers</a></li>
<li><a href="#" class="list" data-filter="Green">Green</a></li>
<li><a href="#" class="list" data-filter="Paris">Paris</a></li>
<li><a href="#" class="list" data-filter="Venice">Venice</a></li>

It seems if I use the previous version of guggenheim, everything works as it should.

Can you give me the commit numbers you're comparing versions from? Will take a look and see if I can see what diffs might be causing a problem.

I found a similar issue.
Filtering in the test/index.html sample is not working fine, but replacing the script with js/guggenheim.min.js from the gh-pages branch the sample works properly.

This issue is due a bug in line 162

props = getNewProperties(row,page,col)

should be

props = getNewProperties(row,col,page)

Pull request merged.