एक उत्तरदायी jQuery चक्र

Question

साफ़ करना मैंने jQuery cycle का उपयोग कर एक उत्तरदायी छवि स्लाइडर बनाया है।

निम्नलिखित सेटअप मैंने ठीक काम किया है, जिसमें .cycle div के अलावा सही ढंग से साफ़ नहीं किया गया है, इसके बाद इसे बिना बैठे किसी भी सामग्री को बनाया गया है।

यह इस तथ्य के कारण है कि div सापेक्ष है और इसके बच्चे पूर्ण हैं।

 $('.cycle').cycle({ 
     slideResize: true, 
     containerResize: false, 
     fit: 1, 
     width: "fit" 
    }); 

मेरे सवाल यह है कि मैं एक निश्चित ऊंचाई होने या किसी घटना भारी जावास्क्रिप्ट का उपयोग किए बिना उत्तरदायी .cycle div साफ कर सकते हैं, है? http://jsfiddle.net/blowsie/HuNfz/19/

---

अपडेट::

मैं कुछ कोड लिखा चक्र की ऊंचाई है, जो उम्मीद के रूप में काम करता है ठीक करने के लिए (हालांकि यह कर सकते हैं बग बाहर कभी कभी

यहाँ jsfiddle पर अपने कोड है), लेकिन इसकी घटना भारी और बहुत चालाक नहीं है।

आईडी को देखने के लिए प्यार सीएसएस में किया जा सकता है या चक्र सेटअप में बदलाव किया जा सकता है। निरपेक्ष और z- सूचकांक मान: आपके और भी भीतर यह स्थिति प्रदान करती है कि रों करने के सापेक्ष:

http://jsfiddle.net/blowsie/HuNfz/22/

Answer 1

साइकिल बहुत ही अनुकूल अनुकूल नहीं है। लेकिन साइकिल 2 निश्चित रूप से है।यहाँ देखें: http://jquery.malsup.com/cycle2/

Answer 2

डिफ़ॉल्ट रूप से प्लगइन प्रदान करती है स्थिति। जो स्लाइड शो को एक स्टैक में एक फ्लोटर/अनस्टक बनाता है। मुझे इस मुद्दे के 2 समाधान मिले:

1. अपनी स्टाइलशीट में clearfix के लिए अपनी पसंदीदा क्लास जोड़ें और सीएसएस शैलियों को जोड़ें।

   .clearfix: { सामग्री के बाद: "।"; प्रदर्शन: ब्लॉक; साफ़: दोनों; दृश्यता: छुपा; लाइन-ऊंचाई: 0; ऊंचाई: 0; }

   .clearfix { डिस्प्ले: इनलाइन-ब्लॉक; }

   एचटीएमएल [xmlns] .clearfix { डिस्प्ले: ब्लॉक; }

   • एचटीएमएल .clearfix { ऊंचाई: 1%; }

2. (बहुत ही सुंदर नहीं) अपनी चक्र वर्ग

   .cycle {सीमा के बॉर्डर जोड़ना: 1px ठोस # f00; }

आशा है कि इनमें से कोई मदद करता है।

Answer 3

संभवतः एक आकार बदलने खिड़कियों जोड़ने:

$(window).resize(function() { 
    $('.cycle').height($('img:visible').height()); 
}); 
setTimeout(300, $(window).resize()); 

http://jsfiddle.net/HuNfz/60/

Answer 4

पुरानी पोस्ट, मुझे पता है।

हम इसे चक्र के साथ उत्पादन में काम कर रहे हैं। Cycle2 नहीं था और अभी भी हमारे लिए एक विकल्प नहीं है। दुर्भाग्यवश, इसमें चक्र के आंतरिक डेटा को संशोधित करना शामिल है। सौभाग्य से, फिक्स सीधा है।

जब चक्र प्लगइन initializes, यह दो propeties cycleW और cycleH क्रमशः प्रारंभिक चौड़ाई और प्रत्येक स्लाइड की ऊंचाई के साथ अपनी स्लाइड्स 'डोम वस्तु से प्रत्येक के लिए कहते हैं। खिड़की के आयाम के बावजूद चक्र प्रत्येक स्लाइड को एनिमेट करने के लिए इन गुणों का उपयोग करता है।

जब विंडो का आकार बदलता है, तो आपको मैन्युअल रूप से cycleW और cycleH को साफ़ करने या उन्हें पूर्व निर्धारित मान पर सेट करने की आवश्यकता होती है।

उदाहरण (अपने स्लाइड शो कंटेनर संभालने है .slideshow):

$(".slideshow").children("div").each(function(){ 
    this.cycleW = $(this).width(); 
    this.cycleH = $(this).height(); 
}); 

हम यह उत्पादन में बहुत अच्छी तरह से काम कर रहा है।

एचटीएमएल इस तरह दिखता है:

<div class="slideshow"> 
    <div class="slide"><img src=".." width="100%" height="auto"/></div> 
    <div class="slide"><p>Copy copy copy no photo on slide </p></div> 
    <div class="slide"><img src=".." width="100%" height="auto"/></div> 
    <div class="slide"><p>Copy copy copy no photo on slide </p></div> 
    ... 
</div> 

अब विंडो आकार परिवर्तन कार्य करते हैं। यह हमारा संस्करण है। आपको अपनी आवश्यकताओं के अनुरूप इसे अनुकूलित करने की आवश्यकता हो सकती है। असल में, हम स्लाइड शो में छवियों को निर्धारित करने वाले मामलों के लिए प्रारंभिक अनुपात संग्रहीत करते हैं। कई बार हमारे पास परिवर्तनीय ऊंचाई स्लाइडशो होती है। यह कोड दोनों परिस्थितियों को संबोधित करता है। फिर, यह प्रत्येक स्लाइड DOM तत्व का आंतरिक cycleW और cycleH मूल्यों को रीसेट करता है अपने माता पिता के कंटेनर

$(window).resize(function(){ 
    // first time around, save original width & height for ratios and complicated preloading 
    $(".slideshow").each(function(i,elt){ 
     var originalWidth = $(elt).data("originalWidth"); // check existence of our ratio cache 
     if (typeof originalWidth == "undefined") { 
      var containerWidth = $(elt).parent().first().width(); // auto scale to container width. 
      var containerHeight = $(elt).parent().first().height(); 
      $(elt).data("originalWidth",containerWidth); 
      $(elt).data("originalHeight",containerHeight); 
     } 
    }); 

    // fix slideshows to their container width 
    $(".slideshow").each(function(i,elt){ 
     var containerWidth = $(elt).parent().first().width(); 
     var originalWidth = $(elt).data("originalWidth")*1; 
     var originalHeight = $(elt).data("originalHeight")*1; 
     var height = Math.floor(originalHeight*containerWidth/originalWidth); // maintain original ratio 
     $(elt).css("width", containerWidth+"px").css("height",height+"px"); // container actual dimensions. height might get reset again below 
     $(elt).children("div").css("width", containerWidth+"px"); // reset each slide width 
                   // (fails once slide moves out, because the cycle plugin will use a cached value) 
     $(elt).children("div").children().css("width", containerWidth+"px"); // fix direct children (images or divs - images should have height auto). 

     // recompute max height based on inside slide, not just photos. 
     // some slideshows have variable height slides. 
     var maxHeight = 0; 
     var panelArray = $(elt).children("div"); 
     for (var i = 0; i < panelArray.length; i++) { 
      var height = $(panelArray[i]).height(); 
      if (height > maxHeight) maxHeight = height; 
     } 
     if (maxHeight > 0) { 
      $(elt).height(maxHeight); 
     } 

     // fix internal cycle dimension cache (cycleW and cycleH on each slide) 
     $(elt).children("div").each(function(){ 
      this.cycleW = containerWidth; 
      this.cycleH = maxHeight; 
     }); 
    }); 
});