एक संवेदनशील jQuery के चक्र को साफ़ करना




css jquery-plugins (3)

मैंने jQuery के चक्र का इस्तेमाल करते हुए एक संवेदनशील छवि स्लाइडर बनाया है।

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

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

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

मेरा प्रश्न यह है, मैं एक निश्चित ऊँचाई या कुछ घटना भारी जावास्क्रिप्ट का उपयोग किए बिना उत्तरदायी .cycle को कैसे साफ़ कर सकता हूं?

यहां मेरा कोड jsfiddle पर है: http://jsfiddle.net/blowsie/HuNfz/19/

अद्यतन करें:

मैंने चक्र की ऊंचाई तय करने के लिए कुछ कोड लिखा था, जो अपेक्षित काम करता है (हालांकि यह कभी-कभी बग को बाहर कर सकता है), लेकिन इसकी घटना भारी और बहुत चालाक नहीं है

आईडी देखना पसंद है शुद्ध सीएसएस में किया जा सकता है या चक्र सेटअप में बदलाव किया जा सकता है।

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


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

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

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

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

    html [xmlns] .clearfix {डिस्प्ले: ब्लॉक; }

    • एचटीएमएल। क्लीरफिक्स {ऊँचाई: 1%; }
  2. (बहुत खूबसूरत नहीं) अपने चक्र वर्ग में सीमा जोड़ें

    । साइकिल {सीमा: 1 पीएक्स ठोस # एफ 00; }

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


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


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

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

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

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

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

$(".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 तत्व के आंतरिक चक्रडब्ल्यू और चक्रएच मानों को रीसेट करता है

$(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;
        });
    });
});




jquery-cycle