Jquery साइकिल + फ़ायरफ़ॉक्स स्क्विंग छवियाँ

Question

हे दोस्तों, मैं एक छवि गैलरी के लिए jQuery चक्र चला रहा हूँ। लिंक देखें: Here

मेरे समस्या यह है कि जब Firefox में देखे गए छवियों squished हो रहे है। जब मैं पृष्ठ को फिर से लोड करता हूं तो समस्या गायब हो जाती है। इससे मुझे विश्वास होता है कि जावास्क्रिप्ट सभी छवियों को लोड करने से पहले ट्रिगर कर रहा है (आमतौर पर पहली छवि ठीक काम करती है और शेष स्क्वाड होती हैं।)

एक हार्ड री-ताजा समस्या को पुन: उत्पन्न करता है।

मैं एक $ (दस्तावेज़) में सब कुछ .ready लिपटे है (function() {}); लेकिन यह अभी भी होता है।

अतिरिक्त जानकारी: यदि मैं छवि की चौड़ाई और ऊंचाई निर्दिष्ट करता हूं, तो सब कुछ ठीक काम करता है। हालांकि विभिन्न आकारों पर सैकड़ों छवियां हैं ..

मैं इस समस्या से बहुत निराश हूं। किसी भी विचार/मदद की बहुत सराहना की है!

$(document).ready(function(){ 
//function onBefore(curr,next,opts) { 
// var $slide = jQuery(next); 
// var w = $slide.outerWidth(); 
// var h = $slide.outerHeight(); 
// $slide.css({ 
//  marginTop: (482 - h)/2, 
//  marginLeft: (560 - w)/2 
// }); 
//}; 

// Decare the function that center the images... 
function onBefore(curr,next,opts) { 
    var $slide = jQuery(next); 
    var w = $slide.outerWidth(); 
    var h = $slide.outerHeight(); 
    $slide.css({ 
     marginTop: (480 - h)/2, 
     marginLeft: (560 - w)/2 
    }); 
}; 


$(document).ready(function() { 
    $('#slideshow').cycle({ 
    fx:  'fade', 
    next: '#next', 
    pause: 0, 
    speed: 500, 
    before: onBefore, 
    prev: '#prev', 
    pause: '#pause', 
    pager: '.thumbs', 
    pagerClick:function(zeroBasedSlideIndex, slideElement) {$(slideElement).find('div.cover').hide();}, 
    pagerAnchorBuilder: function(idx, slide) { 
         var src = $('img',slide).attr('src'); 
         //Change height of thumbnail here 
         return '<li><a href="#"><img src="' + slide.src + '" height="90" /></a></li>'; 

       } 
    });});}); 

Answer 1

मैं जब कई महीने पहले एक साइट पर काम कर (नीचे लिंक) एक ही समस्या थी:

यहाँ मेरी कोड है। यदि आप $(document).ready() में चक्र शुरू कर रहे हैं, तो यह तब होता है जब कोई ग्राहक आपके पृष्ठ पर ब्राउज़ करता है:

1) ग्राहक का ब्राउज़र प्रत्येक img तत्व के लिए अनुरोध भेजता है। उन अनुरोधों को पूरा करने के लिए समय की परिवर्तनीय मात्रा लेते हैं।

2) छवि अनुरोध पूरा होने से पहले, चक्र शुरू होता है। चक्र स्लाइड शो में पहली छवि के अलावा सभी को छिपाकर काम करता है: यह अपनी प्रत्येक छवि पर visibility:hidden और display:none सेट करता है।

समस्या यह है कि फ़ायरफ़ॉक्स एक बार img तत्व के आकार को ठीक करता है और सभी बिंदु पर डिस्प्ले शैली को पर सेट नहीं किया जाता है। इसलिए यदि छवि लोडिंग समाप्त नहीं हुई है, तो इसकी ऊंचाई और चौड़ाई शैली विशेषताएं छोटी हैं (मुझे यकीन नहीं है कि वे वास्तव में क्या फ़ायरफ़ॉक्स के छवि प्लेसहोल्डर का आकार हैं)। जब चक्र अपनी शैली विशेषता को display:block पर सेट करके छवि दिखाता है, तो यह उस छिपे हुए समय के आयामों का उपयोग करता है जब यह छिपा हुआ था।

मैं अपने कोड को बदलने इतना है कि यह चक्र प्लगइन शुरू नहीं करता है जब तक सभी छवियों को लोड करना समाप्त कर रहे हैं द्वारा इस हल किया। में this site पर दीर्घाओं देखने से

var imagesRemaining = 12; // 12 is just the number of images in the slideshow div 

$(document).ready(function() { 
    $('#slideshow > img').bind('load', function(e) { 
     imagesRemaining = imagesRemaining - 1; 
     if (imagesRemaining == 0) { 
      // I'm doing some other stuff when initializing cycle 
      startCycle(); 
      // My images all start with visibility:hidden so they don't show 
      // before cycle hides them in a 'stack', so ... 
      $('#slideshow > img').css('visibility', 'visible'); 
     } 
    }); 
}); 

function onBefore(curr, next, opts) { // Your code here ... } 

function startCycle() { 
    $('#slideshow').cycle({ ... // your initialization here }); 
} 

आप कार्रवाई में इसे देख सकते हैं: ऐसा करने के लिए, मैं छवियों मैं साइकिल चालन कर रहा हूँ की संख्या की एक काउंटर चर इनिशिएलाइज़, तो एक लोड घटना प्रत्येक छवि के लिए इस तरह बाँध फ़ायरफ़ॉक्स। मैं गतिशील रूप से गैलरी पृष्ठों का निर्माण कर रहा हूं, इसलिए यह आपके पृष्ठ की तुलना में थोड़ा अलग है, लेकिन यदि आप फायरबग के साथ घूमते हैं तो आप अधिक जानकारी देख सकते हैं।

Answer 2

मैं यह भी जोड़ना चाहूंगा कि ऐसा लगता है कि चौड़ाई और ऊंचाई विशेषता जोड़ने से यह समस्या हल हो जाती है।

Answer 3

आप स्लाइड शो को भरने के लिए एक डेटाबेस का उपयोग कर रहे हैं तो आप छवि से ही छवि आयाम तक पहुँचने की कोशिश कर सकते।

उदाहरण के लिए, का उपयोग कर Django आप अपने img टैग में

width="{{ xxx.image.width }}px" height="{{ xxx.image.height }}px" 

उपयोग कर सकते हैं।

Answer 4

ठीक है मैं लोड बुलाने की अपनी शायद एक awfull तरह से जानते हैं, लेकिन मैं सिर्फ किसी कारण यह सिर्फ इसलिए काम नहीं करते मैं पूरे चक्र प्रारंभकर्ता अंदर बुलाया के लिए .load करने के लिए अपने चक्र कोड बाँध coulnd ...

मैं आकार के लिए मजबूर नहीं कर सकता है के बाद से मैं ली को दोहराते रहते कर रहा हूँ गतिशील छवियों और डेटा

, जिसमें यह रूप में मुझे के रूप में desperated उन लोगों के लिए शायद त्रुटिपूर्ण कुछ का विस्तार, लेकिन कम से ...

Answer 5

जोश, अपने समाधान सिर्फ है मुझे सिरदर्द बचाया, बहुत बहुत धन्यवाद!

मुझे लगता है कि मैंने उन पृष्ठों को संभालने के लिए थोड़ा सा संशोधन किया है जहां आप छवियों की कुल संख्या नहीं जानते हैं। ऐसा लगता है कि मेरे लिए ठीक काम कर रहा है, अगर कोई भी दोष देख सकता है, तो कृपया उन्हें इंगित करें - मैं अभी भी सीख रहा हूं।

$(document).ready(function() { 
    $('#slideshow > img').each(
     function go() { 
      $(this).bind('load', function (e) { 
       projects(); 
       $('#slideshow > img').css('visibility', 'visible'); 
      }); 
     }); 
    }); 

function projects() { 
    $('#slideshow').cycle({ 
     fx: 'scrollHorz', 
     speed: 300, 
     timeout: 0, 
     next: '#next ', 
     prev: '#prev ', 
     after: onAfter, 
     nowrap: 1, 
     autostop: 1 
    }); 
} 

Answer 6

वहाँ एक बहुत सरल और क्लीनर समाधान है कि मैं क्या पहले से ही प्रस्तावित किया गया है की तुलना में इस समस्या को हल करने के लिए प्रयोग किया जाता है:

jQuery का उपयोग करके आप अपनी स्थिति के अनुसार $(window).load बजाय $(document).ready उपयोग करने के लिए की जरूरत है। इस मुद्दे को ठीक करने के लिए, यह परिवर्तन:

$(document).ready(function() { 
    $('#slideshow').cycle({ 
    /* ... */ 
    }); 
}); 

इस के लिए:

$(window).load(function() { 
    $('#slideshow').cycle({ 
    /* ... */ 
    }); 
}); 

यह काम क्यों करता है? क्योंकि window.onload पृष्ठ पर सभी संदर्भित छवियों के बाद आग लगती है (https://developer.mozilla.org/en/DOM/window.onload, और .load() - jQuery API देखें), जो आपकी स्थिति में वांछित व्यवहार है। $(document).ready, जिसे "डोम रेडी" के नाम से जाना जाता है, छवियों को लोड करने से पहले आग लग जाएगी। यह आमतौर पर वांछित व्यवहार है, लेकिन आपकी स्थिति में यह बहुत जल्दी है।

Answer 7

आप यूट्यूब वीडियो को उत्तरदायी बनाने के समान समाधान का उपयोग कर सकते हैं। आपको अपनी चौड़ाई के अनुपात को मापने की आवश्यकता है, और इसे साइक्लिंग div में पैडिंग-तल के रूप में जोड़ें। मेरी 1024X680 फ़ोटो के लिए, मैं प्रयोग किया जाता 680/1024 = 66.4%

आपके मामले में, मेरा मानना ​​है कि

#slideshow{ padding-bottom:66.4%; } छवि unshrunk दिखाएगा। मुझे नहीं पता कि वास्तविक ऊंचाई और चौड़ाई मान आप किसके साथ काम कर रहे हैं, इसलिए अपना खुद का विकल्प चुनें। मुझे इस समाधान का उपयोग करना था जब $ (विंडो)। लोड समाधान गड़बड़ी से अप्रभावी साबित हुआ - तो अब मैं दोनों का उपयोग करता हूं।

यह छवि के आयामों को सेट करने से बेहतर है, क्योंकि यह तरल पदार्थ, उत्तरदायी वातावरण में स्लाइड करता है।