Currently filtered out elements get opacity: 0 (or when opacity is not supported, alpha is modified), hence filtered out elements are not visible and filtered in elements might take over their position (i.e. end up with the same top,left values).
The problem is that if hidden element A preceeds visible element B (in DOM order) and they happend to occupy the same position, then mouse events on that position are captured by hidden element A which is not desirable.
The workaround i used so that the visible element is the one that triggers the events is to modify the z-order during the custom filter function (not sure if there is a more elegant solution):
window.gallery.filter(function(el) {
if(items.is(el)) {
$(el).removeClass('buried'); // fixes z-order
return true;
} else {
$(el).addClass('buried'); // fixes z-order
return false;
}
});
where gallery is the guggenheim instance and items is a jQuery object with the filtered in elements.
the css:
Btw guggenheim.js is great.
Currently filtered out elements get
opacity: 0(or when opacity is not supported,alphais modified), hence filtered out elements are not visible and filtered in elements might take over their position (i.e. end up with the sametop,leftvalues).The problem is that if hidden element
Apreceeds visible elementB(in DOM order) and they happend to occupy the same position, then mouse events on that position are captured by hidden elementAwhich is not desirable.The workaround i used so that the visible element is the one that triggers the events is to modify the
z-orderduring the custom filter function (not sure if there is a more elegant solution):where
galleryis the guggenheim instance anditemsis a jQuery object with the filtered in elements.the css:
Btw guggenheim.js is great.