उत्तरदायी लाइटबॉक्स

Question

मैं Magnific Popups AJAX पॉपअप का उपयोग कर रहा हूं ताकि इंस्टाग्राम या फेसबुक (बाईं तरफ की छवि, दाईं ओर की टिप्पणियां इत्यादि) जैसे पॉपअप अनुभव को बनाया जा सके। मैं पूरे लाइटबॉक्स के लिए अधिकतम ऊंचाई सेट करने के बारे में कैसे जाउंगा और छवि को केन्द्रित कर सकता हूं जब इसे लंबवत केंद्रित किया जा सकता है? इसे सभी ब्राउज़रों में काम करने की ज़रूरत है और इसे उत्तरदायी होना चाहिए जो मुश्किल है। मुझे लगता है कि यह सभी ब्राउज़रों में ठीक से काम नहीं कर रहा है। मुझे लगता है कि मुझे एक jQuery समाधान नहीं है क्योंकि मुझे इसकी आवश्यकता हो सकती है।

छवि और सामग्री जैसे जारी कर रहे हैं:

.image_container, .content { 
    width: 50%; 
    float: left; 
} 

और नाव सिर्फ मीडिया के प्रश्नों का उपयोग कर कम हो जाता है स्क्रीन आकार के साथ मंजूरी दे दी है।

मैं एक jsfiddle मदद करने के लिए समझने की क्या मैं समझाने की कोशिश कर रहा हूँ कर दिया है:

jsFiddle

प्रयास करें प्रभाव की जाँच करने के लिए iframe फिर से आकार देने।

Answer 1

सबसे अच्छा तरीका jqueryUI resize होगा।

अगर आप चाहते हैं कि आपके div (कंटेनर) खिड़कियों से बदल जाएगा आकार आप ऐसा somesing करना चाहिए:

$(window).resize(function() { 
    var docheight = $(document).height(); 
    $("#container").height(docheight); 
}); 

Answer 2

Working Example

मुझे लगता है मैं अनुकूलता बाहर काम किया है आईई 6 के लिए एक समाधान के साथ मुद्दों और 300px की अधिकतम ऊंचाई सेट करें।

जे एस:

$(document).ready(function() { 
    $('.popup-with-zoom-anim').magnificPopup({ 
     type: 'inline', 

     fixedContentPos: false, 
     fixedBgPos: true, 

     overflowY: 'auto', 

     closeBtnInside: true, 
     preloader: false, 

     midclick: true, 
     removalDelay: 300, 
     mainClass: 'my-mfp-zoom-in' 
    }); 
}); 

// Handles the resize event 
$(window).resize(fn_resizeImage); 
$('.popup-with-zoom-anim').click(fn_resizeImage); 
// Resizes the content2 to fit with image height 
function fn_resizeImage() { 
    var imgHeight = $('div.image_container > img').outerHeight(true); 
    var cnt1Height = $('div.content > div.content1').outerHeight(true); 
    var cnt2 = $('div.content > div.content2').outerHeight(imgHeight - cnt1Height); 
} 

सीएसएस:

img { 
    width: 300px; 
} 
.view_container { 
    max-height:100%; 
    max-width: 850px; 
    _width:expression(this.scrollWidth > 850 ?"850px" :"auto"); 
    /* sets max-width for IE6 */ 
    margin: 20px auto; 
    background-color: #1C1C1C; 
    padding: 0; 
    line-height: 0; 
    border: 1px solid red; 
} 
.image_container, .content { 
    width: 50%; 
    float: left; 
} 
.image_container img { 
    max-height:300px; 
    _height:expression(this.scrollWidth > 300 ?"300px" :"auto"); 
    /* sets max-width for IE6 */ 
    max-width: 100%; 
    _width:expression(this.scrollWidth > 850 ?"850px" :"auto"); 
    /* sets max-width for IE6 */ 
} 
.image_container { 
    text-align: center; 
} 
.content1, .content2 { 
    background-color: #fff; 
    padding: 1em; 
} 
.content { 
    line-height: 1.231; 
} 
.content2 { 
    height: 300px; 
    overflow-y: scroll; 
} 
#small-dialog { 
    max-width: 850px; 
    _width:expression(this.scrollWidth > 850 ?"850px" :"auto"); 
    /* sets max-width for IE6 */ 
    margin: 20px auto; 
    background-color: #1C1C1C; 
    padding: 0; 
    line-height: 0; 
    border: 1px solid red; 
} 
@media (min-width: 1px) and (max-width: 638px) { 
    .image_container, .content { 
     width: auto; 
     float: none; 
     clear: both; 
    } 
    .image_container img { 
     max-height:150px; 
     max-width:150px; 
     _height:expression(this.scrollWidth > 150 ?"150px" :"auto"); 
     /* sets max-width for IE6 */ 
     _width:expression(this.scrollWidth > 150 ?"150px" :"auto"); 
     /* sets max-width for IE6 */ 
    } 
} 

Answer 3

ऐसे पॉपअप और मोडल बॉक्स के रूप में विशुद्ध रूप से CSS3 के रूपांतरण का उपयोग कर पृष्ठ के मध्य में एक तत्व की स्थिति के लिए एक रास्ता है।

<div id="myelem"></div>

#myelem { width: 500px; height: 400px; position: fixed; top: 50%; left: 50%; background: red; transform: translate(-50%, -50%); }

ब्राउज़र विक्रेता उपसर्गों (-webkit- और -moz- जैसे) के सभी मत भूलना। यह भी याद रखें कि पुराने ब्राउज़र (IE9 या नीचे) transform को बिल्कुल पहचान नहीं पाएंगे। आपको उनके लिए एक जावास्क्रिप्ट पॉलीफिल की आवश्यकता होगी।

Answer 4

मुझे यकीन है कि मैं पूरी सवाल समझ में आ नहीं कर रहा हूँ, लेकिन यह है कि कैसे आप अनुलंब और क्षैतिज केंद्र छवियों:

डेमो: http://jsbin.com/ukowar/1/edit

के साथ संयोजन में निरपेक्ष स्थिति के माध्यम से केंद्रित margin:auto

img { 
    width:200px; 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin:auto; 
} 

आशा है कि आपकी समस्या के हिस्से में मदद मिलेगी।