विंडो आकार बदलने पर कलरबॉक्स का आकार बदलें

Question

रंगीन उत्तरदायी डिज़ाइन के लिए रंग बॉक्स "बॉक्स से बाहर" उपयुक्त है। मैं प्रतिशत के साथ डिफ़ॉल्ट आयाम सेटिंग्स अधिभावी कर रहा हूँ, और फिर अधिकतम मूल्य निर्धारित है, इसलिए चीज़ें विशाल स्क्रीन पर हाथ से नहीं मिलता है:

$.colorbox.settings.width = "92%"; 
$.colorbox.settings.height = "90%"; 
$.colorbox.settings.maxHeight = 850; 
$.colorbox.settings.maxWidth = 1200; 

काम करता है। मैं cboxTitle तत्व का आकार भी उपरोक्त आईएमजी की चौड़ाई के बराबर कर रहा हूं, ताकि मेरे कभी-कभी लंबे कैप्शन हमेशा अच्छी तरह से रेखांकित हो जाएं।

$(document).bind('cbox_complete', function(){ 
    var photoWidth = $(".cboxPhoto").innerWidth(); 
    var photoContainer = $("#cboxContent").outerWidth(); 
    var leftPix = (photoContainer - photoWidth)/2;  
    $("#cboxTitle").css({'left' : leftPix, 'width' : photoWidth}); 
}); 

जो भी काम करता है। यह डरावना हिस्सा छोड़ देता है: विंडो आकार बदलने की घटनाओं से निपटना। मैं कोशिश कर रहा हूँ निम्नलिखित

$(window).on("resize", function(){ 
    $.fn.colorbox.resize({ 
     height: "90%", 
     width: "92%" 
    }); 
}); 

(मैं वास्तव में, एक कस्टम debouncedresize मानक jQuery आकार बदलने के बजाय घटना का उपयोग कर रहा है ताकि वेबकिट में आकार बदलने के ईवेंट के स्ट्रीम रुके, लेकिन मैं वह हिस्सा बाहर जा रहा हूँ क्योंकि यह प्रासंगिक नहीं है। इसके अलावा, मैं आकार बदलने के विकल्पों में समान चौड़ाई और ऊंचाई प्रतिशत मान दोहरा रहा हूं क्योंकि अन्यथा कोई आकार बदलना नहीं होता है। :()

यह अंतिम भाग बिल्कुल काम नहीं कर रहा है। समस्याओं को तोड़ने का प्रयास करें:

1) जब उपयोगकर्ता मानक destop आकार पर एक रंग बॉक्स लोड करता है और फिर व्यूपोर्ट n को स्केल करता है तीर, cboxPhoto तत्व की ऊंचाई सही ढंग से स्केल नहीं कर रही है। चौड़ाई सही ढंग से घट रही है, लेकिन ऊंचाई एक ही रह रही है, एक "निचोड़" बना रही है। तो मैंने cboxPhoto के लिए सीएसएस में height:auto जोड़ने का प्रयास किया। यह पहलू अनुपात को पुनर्स्थापित करता है, लेकिन अब cboxPhoto तत्व बहुत बड़ा है, और क्लिप किया जा रहा है। जब मैं पहले नहीं था तो मुझे मोडल के अंदर स्क्रॉलबार मिल रहा है। तस्वीर आकार में नहीं है कि अगर मैं कलरबॉक्स बंद कर दूंगा और इसे नई ब्राउज़र व्यूपोर्ट चौड़ाई पर फिर से खोल दूंगा।

2) cboxTitle के लिए सीएसएस का पुनर्मूल्यांकन नहीं किया जा रहा है। कलरबॉक्स आकार का फ़ंक्शन cbox_complete ईवेंट ट्रिगर करने के लिए प्रकट नहीं होता है। क्या यह नहीं होना चाहिए?

मुझे इन समस्याओं को ठीक करना अच्छा लगेगा, लेकिन मुझे यह भी लगता है कि प्लगइन की वर्तमान स्थिति को देखते हुए शायद इस उपयोग के मामले को हल करने का सबसे आसान तरीका यह है कि खिड़की का आकार बदलने पर बस पूरे रंगबॉक्स को बंद करें और फिर से लोड करें, लेकिन उस गैलरी में सटीक उसी सामग्री पर वापस आएं जो उपयोगकर्ता आकार बदलने से पहले देख रहा था। लेकिन मैं इसे कोड करने के तरीके पर बिल्कुल अस्पष्ट हूं। किसी भी सहायता के लिए अग्रिम रूप से धन्यवाद!

पीएस सबको, कृपया मुझे तर्क दें कि यह केवल डिजाइनर हैं जो खिड़कियों का आकार बदलते हैं। क्षमा करें, मैं बस इसे नहीं खरीदता। लोग पैमाने जब एक चौंकाने वाली तस्वीर स्क्रीन पर है, और गोलियों विशेष रूप से हर समय घुमाया हो ...

Answer 1

क्या तुमने कभी कुछ इस तरह की कोशिश की: बिना '.fn' और साथ

if($('#colorbox').length && $('#colorbox').css('display') != 'none') { 
     setTimeout(function(){ 
       $.colorbox.resize({ 
        width: '100%', 
        height: '80%' 
       }); 
      }, 1500); 
    } 

कोशिश कुछ देरी, भी ...

Answer 2

क्या आप बस आकार बदलने पर रंगीन विंडो की सीएसएस ऊंचाई और चौड़ाई सेट कर सकते हैं?

$(window).on("resize", function(){ 
    //check if colorbox is open. This 'if' is from stackoverflow, I haven't tested 
    if($('#colorbox').length && $('#colorbox').css('display') != 'none') { 
     //replace colorboxID with the correct ID colorbox uses 
     document.getElementById('coloboxID').style.width='92%'; 
     document.getElementById('coloboxID').style.height='90%'; 
    } 
}); 

Answer 3

मैं ऐसे मामलों में $.resize का उपयोग करने से रोकता हूं। मुझे लगता है कि CSS Media Queries शक्तियां उत्तरदायी डिजाइन। तो मीडिया प्रश्नों का उपयोग क्यों न करें।

मैंने अभ्यास में colorbox कभी भी कोशिश नहीं की है, लेकिन मुझे लगता है कि $.colorbox.settings.width = "92%"; तत्व के लिए CSS एक इनलाइन डालें।

उन सेटिंग्स को हटाएं। अपने रंगबॉक्स तत्व में किसी भी इनलाइन सीएसएस को रोकें। फिर बड़े डेस्कटॉप के लिए प्रारंभिक स्केलिंग के लिए width और height देने के लिए बस सीएसएस का उपयोग करें।

और विंडो आकार बदलने के लिए मोडल आकार को स्केल करने के लिए Media Queries का उपयोग करें।

#colorbox{ 
    height: 90%; 
    width: 92%; 
} 

@media (max-width: 992px) { 
    #colorbox{ 
     height: 90%; 
     width: 92%; 
    } 
} 

एकाधिक प्रश्न भी पूरी तरह कानूनी हैं। तो, आप मोडल आकार को छोटे आकारों पर भी सेट कर सकते हैं।

@media (max-width: 430px) { 
    #colorbox{ 
     height: 96%; 
     width: 98%; 
    } 
} 

आप % के बजाय px उपयोग कर सकते हैं, लेकिन इस मामले में, आप Colorbox मोडल चौड़ाई/ऊंचाई एक छोटे से हो जब एक आकार से आगे बढ़ कूद की जाएगी। लेकिन आप इस मामले में आकार बदलने की प्रक्रिया को आसान बनाने के लिए सीएसएस की transition संपत्ति का उपयोग कर सकते हैं।