javascript - Isotope filter with jquery css overlays not working as expected -
i have strange problem, using isotope's filterable function sort through elements in portfolio. when user hovers on portfolio element overlay triggered using following code:
/*************************************************** portfolio item image hover ***************************************************/ $(window).load(function(){ $(".portfolio-grid ul li .item-info-overlay").hide(); if( is_touch_device() ){ $(".portfolio-grid ul li").click(function(){ var count_before = $(this).closest("li").prevall("li").length; var this_opacity = $(this).find(".item-info-overlay").css("opacity"); var this_display = $(this).find(".item-info-overlay").css("display"); if ((this_opacity == 0) || (this_display == "none")) { $(this).find(".item-info-overlay").fadeto(250, 1); } else { $(this).find(".item-info-overlay").fadeto(250, 0); } $(this).closest("ul").find("li:lt(" + count_before + ") .item-info-overlay").fadeto(250, 0); $(this).closest("ul").find("li:gt(" + count_before + ") .item-info-overlay").fadeto(250, 0); }); } else{ $(".portfolio-grid ul li").hover(function(){ $(this).find(".item-info-overlay").fadeto(250, 1); }, function() { $(this).find(".item-info-overlay").fadeto(250, 0); }); } });
however, other elements hidden due way isotope filters receive 'overlay' property/class (confirmed in chrome inspector) when ones shown not. think has $(this).find
selecting wrong elements doesn't understand filter isotope, can't sure.
the phenomenon visible if go http://fagardesigns.com/portfolio click 'aftermovie' , scroll on 'paint splash' 2nd row 3rd right.
if reload page, disappears strange thing.
here's see: works if choose filter switch other filters. however, in jquery.isotope.min.js initializing isotope (why doing here instead of in custom.js?), initial filter advertisement
var $container = $('#thumbs'); $container.isotope({ filter: '.advertisement', <= why initial filter? itemselector : '.item', animationengine : 'jquery', animationoptions: { duration: 250, easing: 'linear', queue: false } });
and why re-initializing isotope when window resizes?
$(window).resize(function() { var $container = $('#thumbs'); $container.isotope({ filter: '.advertisement', itemselector : '.item', animationengine : 'jquery', animationoptions: { duration: 250, easing: 'linear', queue: false } }); });
Comments
Post a Comment