ScrollReveal.js - क्लिक या ईवेंट पर सभी आइटम प्रकट करें?

Question

क्या स्क्रॉल के साथ सभी आइटम एक क्लिक ईवेंट के साथ प्रकट करने का कोई तरीका है?शायद सभी कार्यों को प्रकट करते हैं?

समस्या:

मैं उपयोग कर रहा हूँ स्क्रॉल आइसोटोप के साथ ही प्रकट करते हैं। आइसोटोप की सॉर्टिंग कार्यक्षमता स्क्रॉल प्रकट के साथ अजीब प्रतिक्रिया करता है।

जब मैं एक "फ़िल्टर" बटन पर क्लिक करता हूं तो मैं आइसोटोप फ़ंक्शन फ़िल्टर पर कॉल कर रहा हूं।

$grid.isotope({filter: '.fish-filter'}); // example 

लेकिन अगर मैंने कहा filer बटन मेरे ग्रिड में छेद कर रहे हैं क्लिक करने के बाद नीचे स्क्रॉल करें और मैं करने के लिए "फिर से क्लिक करें" स्क्रॉल

धन्यवाद के माध्यम से सभी वस्तुओं के बाद बटन का पता चला गया है !! -

अद्यतन

मैं लेआउट कॉल यहाँ जोड़ लिया है इस कम से कम छेद है कि पहले मौजूद थे ठीक करता है:

window.sr = ScrollReveal({ 
    beforeReveal: function (domEl) { 
     //$grid.isotope('layout'); // fixes holes 
    }, 
    afterReveal: function (domEl) { 
     $grid.isotope('layout'); 
    } 
}); 

हालांकि - नव फ़िल्टर किए गए आइटम "में फीका" नहीं है के रूप में वे स्क्रॉल के साथ करते हैं, वे आइसोटोप से स्टाइल के साथ "टाइल इन" करते हैं। आदर्श स्थिति सभी और लेआउट परिदृश्य प्रकट करेगी - इस तरह आप एनिमेशन में कोई अंतर नहीं देख सकते हैं - या फ़िल्टर की परवाह किए बिना किसी अन्य स्थिति में केवल साधारण स्थिर लुप्त हो सकता है।

अद्यतन अद्यतन

हम सभी टाइल एक ही ऊंचाई इतनी नहीं रह गया है समस्या का सामना कर रहे हैं बनाने का फैसला किया।

धन्यवाद

Answer 1

Isoptope एक समारोह relayout कहा जाता है। आप इसे इस $grid.isotope('reLayout', callback)

की तरह उपयोग कर सकते हैं आप डॉक्स here

पढ़ सकते हैं इस समारोह में अधिक आ रही समस्या का दिया काम का हो सकता है।

हालांकि, आपके सवाल का जवाब देने के लिए विशेष रूप से: आइसोटोप बस एक वर्ग आइटम को छिपाने के लिए कहते हैं, तो आप इस

$('button').on('click', function() { 
    //You can reset the CSS 
    $('.isotope-hidden').removeClass('isotope-hidden'); 
    //Or you can use the isotope filter reset. 
    $grid.isotope({ filter: '*' }); 
});