आइसोटोप ओवरलैपिंग छवियां?

Question

ऐसा लगता है जैसे यह केवल क्रोम और सफारी में होता है .. फ़ायरफ़ॉक्स नहीं। मैं नींव के उत्तरदायी ढांचे के साथ इसका उपयोग कर रहा हूं इसलिए मुझे यकीन नहीं है कि ऊंचाई निर्धारित करने के बारे में क्या करना है। ऐसा लगता है कि क्रोम/सफारी में छवियों के बीच पर्याप्त अंतर नहीं है ..

मैं इसे कैसे ठीक करूं?

संपादित करें: यहाँ एक बेला http://jsfiddle.net/TLjay/

समस्या के साथ यह है कि यह समस्या मैं आ रही है प्रदर्शित करने के लिए प्रतीत नहीं होता है .. तो मैं क्या उस के बारे में क्या करने के लिए यकीन नहीं है .. मैंने सब कुछ अक्षम करने की कोशिश की है लेकिन आइसोटोप .. सभी jquery/css और यह अभी भी क्रोम/सफारी में छवियों को कम करता है लेकिन फ़ायरफ़ॉक्स में ठीक है।

इसके अलावा, अगर मैं मारा "सभी" फिल्टर के तहत यह है कि उपयोगी हो सकता है कि कैसे अपनी तो देखने के लिए लगता है कि करने के लिए पृष्ठ इस पता लगाना

मैं इसे imagesLoaded साथ काम मिल गया में फैला है, इसलिए इसकी पर्याप्त दे रही है अंतरिक्ष पर छोड़ दिया और छवियों के अधिकार पर अंतरिक्ष अभी भी जहां इसकी होने के लिए नहीं लगता है .. क्योंकि ब्राउज़र कैश्ड छवियों का इस्तेमाल मेरी स्क्रिप्ट नीचे

<script type="text/javascript"> 
    var $container = $('.isosort') 
    // initialize Isotope 
     $container.isotope({ 
      // options... 
      resizable: false, // disable normal resizing 
      layoutMode : 'fitRows', 
      animationEngine : 'best-available', 

      // set columnWidth to a percentage of container width 
      masonry: { columnWidth: $container.width()/5 } 
     }); 

     // update columnWidth on window resize 
     $(window).smartresize(function(){ 
      $container.isotope({ 
      // update columnWidth to a percentage of container width 
      masonry: { columnWidth: $container.width()/5 } 
      }); 
     }); 
     $container.imagesLoaded(function(){ 

       $container.isotope({ 
      // options... 
       }); 
     }); 

     $('#filters a').click(function(){ 
      var selector = $(this).attr('data-filter'); 
      $container.isotope({ filter: selector }); 
      return false; 
     }); 
    </script> 

Answer 1

अद्यतन (मूल जवाब गलत था है ..)

समस्या यह प्रतीत होती है कि छवियों को लोड नहीं किया गया है और गणना विफल हो गई है।

आप के बाद से यह हो जाता है $(window).load(function(){ ..... }); यह अपेक्षा के अनुरूप काम करने लगता है में Isotop कोड लपेट हैं ..

देखें http://jsfiddle.net/TLjay/2/

---

सुनिश्चित नहीं हैं कि क्यों ऐसा होता है, लेकिन एक सरल समाधान नहीं है ( एक बार जब आप resize पर मैन्युअल रूप से कॉल करने के लिए विंडो का आकार बदलते हैं तो तय करें।

तो बस अपने कोड के अंत में $(window).resize(); जोड़ने यह ठीक करता है .. http://jsfiddle.net/TLjay/1/

Answer 2

पर

डेमो आप सुनिश्चित करें कि आप सभी imagess प्रीलोड इससे पहले कि आप आइसोटोप विधि कॉल करना चाहिए, यहाँ असली दुनिया डेमो है इसके लिए: http://gbin1.com/gb/demoviewer/360/06242ba0-40a1-45fd-946f-cc89e0df64c9/index.html.htm, आप jquery.imagesloaded.min.js प्लगइन के साथ छवियों को प्रीलोड करें, फिर आइसोटोप पर कॉल करें, सामग्री ओवरलैप नहीं होगी।

Answer 3

छवियां वर्तमान में युक्त तत्व में छवियों की जांच करके लोड किए गए काम करती हैं। तो आपके मामले में, यह वास्तव में $ (विंडो) .load() में कुछ भी नहीं करता है क्योंकि उस तत्व में कोई आइटम नहीं है। इसके बजाय, मैं $ .ajax.success

success: function(data){ 
    // Update isotope container with new data. 
    $container.isotope('remove', $container.data('isotope').$allAtoms) 
    $container.isotope('insert', $(data)) 
     // trigger isotope again after images have been loaded 
     .imagesLoaded(function() { 
     $container.isotope('reLayout'); 
     }); 
    } 
});