jQuery साइकिल 2 उत्तरदायी डब्ल्यू/केंद्रित स्लाइड

Question

मैं उत्कृष्ट साइकिल 2 jQuery प्लगइन का उपयोग कर एक उत्तरदायी छवि गैलरी स्थापित करने का प्रयास कर रहा हूं। गैलरी में पोर्ट्रेट और लैंडस्केप दोनों छवियां होंगी।

मैं केंद्रित स्लाइड विकल्प (CYCLE2 के सेंटर प्लगइन: http://jquery.malsup.com/cycle2/demo/center.php) का उपयोग कर रहा है और इस (अपने ब्राउज़र विंडो का आकार बदलने अगर यह पहली बार में स्पष्ट नहीं है की कोशिश करो!)

http://goo.gl/NFFZk

वेबकिट ब्राउज़रों में समस्याओं के कारण किया जा रहा है

हरी पृष्ठभूमि चक्र कंटेनर का प्रतिनिधित्व करती है।

केंद्र विकल्पों को जोड़ा बिना

(डेटा-चक्र-केंद्र-horz = true डेटा चक्र-केंद्र-Vert = true) पूरी बात अच्छी तरह से काम कर रहा है, देखें:

http://goo.gl/p76wi

मैं काम नहीं कर सकता केंद्र संस्करण के साथ समस्याओं का कारण क्या है।

सीएसएस कोड छवियों पर बहुत कम है:

.cycle-slideshow img { 
    max-height: 100%; 
    max-width: 100%; 
} 

युक्त तत्व के सीएसएस यहाँ है

.cycle-slideshow { 
    background: green; 
    display: block; 
    position:absolute; 
    height:auto; 
    bottom:0; 
    top:0; 
    left:0; 
    right:0; 
    margin:20px auto; 
    padding:0; 
    width:80%; 
    } 

किसी भी मदद के लिए अग्रिम में बहुत धन्यवाद!

Answer 1

आपके उदाहरण की समीक्षा करने के बाद जो सहयोग नहीं कर रहा है, ऐसा प्रतीत होता है जैसे इनलाइन-स्टाइल आपको कुछ सिरदर्द पैदा कर सकती हैं। यहाँ एचटीएमएल दूसरी छवि (koy मछली) के लिए संदर्भित है:

<img src="http://www.freeimageslive.com/galleries/nature/animals/pics/nishikigoi.jpg" style="position: absolute; top: 0px; left: 0px; z-index: 99; display: block; margin-left: 205px; opacity: 1;" class="cycle-slide cycle-slide-active"> 

बात यहाँ ध्यान दें margin-left संपत्ति जो 205px पर सेट किया जाता होगा। गतिशील या उत्तरदायी छवियों को केंद्रित करने के लिए, गणित का एक बिट आवश्यक है। इसे पूरा करने के लिए आपको ऑफ़सेट का उपयोग करने की आवश्यकता होगी। छवि को left: 50% पर सेट करने से छवि के बाईं ओर कंटेनर के बीच में संरेखित किया जाएगा। एक बार वहां, आप छवि को सही केंद्र में रखने के लिए आधे चौड़ाई के नकारात्मक margin-left का उपयोग करेंगे। (उदाहरण के लिए, अगर छवि की चौड़ाई 80px है, तो आप सीएसएस left: 50%; margin-left: -40px; का प्रयोग करेंगे

Answer 2

चक्र प्लगइन का असम्पीडित संस्करण प्राप्त करें:। http://malsup.github.io/jquery.cycle2.center.js

बदलें लाइन 17 (घटनाओं की सूची में लोड जोड़ने कि आकार बदलने से चलाता है):

$(window).on('resize orientationchange load', resize); 

यह वेबकिट ब्राउज़रों पर अजीब यादृच्छिक केंद्रित मुद्दों को ठीक होगा

मैं सेशन। malsup github पर इसके लिए an issue ened। उम्मीद है कि यह जल्द ही प्रकाशित संस्करण में अपना रास्ता काम करेगा।

Answer 3

यहां एक और विकल्प है।

$('.cycle-slideshow').on('cycle-initialized', function(event, opts) {     
    $(window).trigger('resize'); 
});