jquery isotope not working before filter buttons are not pressedjquery -
isotope won't start when load page.
i have tried use isotope (from isotope.metafizzy.co) filtering buttons.
here code of html , js:
<div class="scroll-pane"> <div id="container" class="isotope"> <div class="isotope-item box-item size1 group1"> <img width="190" height="130" src="..." class="wp-post-image" /> <a href="..." class="projdescription">some text here</a> </div> <div class="isotope-item box-item size1 group1 group2"> ... </div> <div class="isotope-item box-item size3 group1"> ... </div> .. </div> </div> <ul id="filters"> <li><a href="#" data-filter="*" class="selected">show all</a></li> <li><a href="#" data-filter=".group1">kategorija1</a></li> <li><a href="#" data-filter=".group2">kategorija2</a></li> <li><a href="#" data-filter=".group3">kategorija3</a></li> </ul> js:
jquery(window).load(function(){ jquery('#isotope_content').isotope({ layoutmode: 'masonryhorizontal', masonryhorizontal: { rowheight: 132 } }); jquery("ul#filters li a").click(function() { jquery("ul#filters li a").not(this).removeclass("selected"); jquery(this).toggleclass("selected"); }); jquery(".box-item").hover(function(){ jquery(this).children(".projdescription").stop().fadeto(350,0.9)}, function(){ jquery(this).children(".projdescription").stop().fadeto(350,0) } ); jquery('#filters a').click(function(){ var selector = jquery(this).attr('data-filter'); jquery('#container').isotope({ filter: selector }); return false; }); }); the problem when page loads first time isotope not working, nothing happens images. if press of filter buttons (show or other) works.
i cannot reproduce problem withing jsfiddle. way see online - http://dev.metolat.lv/
website loads without isotope functioning, after pressing "show all" reorders images expected.
just note - using wordpress create page, not use plugin isotope, instead including directly.
i believe script , image loading order, not resolve problem.
from see there no element id of isotope_content feed isotope @ initialization. there div content use in filters click handlers -- , works. change isotope_content content , should work.
btw. load deprecated jquery method of ( 1.8 ). if you'd having image problems can isotope author's other plugin called imagesloaded (it should bundled isotope anyway).
Comments
Post a Comment