Responsible Lightbox

Question

I use Magnific Popups to create pop-ups similar to Instagram or Facebook (image on the left, comments on the right, etc.). How can I adjust the maximum height for the entire lightbox and center the image when it can be centered vertically? This should work in all browsers and should be responsive, which is difficult. It seems I can’t work fine in all browsers. I believe that I am not opposed to jQuery solution, as this is what I might need.

Images and content are moved as such:

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

And the float is simply cleared, the screen size is reduced using multimedia queries.

I did jsfiddle to understand what I'm trying to explain:

jsFiddle

Try resizing the iframe to check the effect.

Answer 1

the best way would be jqueryUI to resize .

if you want your div (container) to resize to the window, you should do something like this:

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

Answer 2

Working example

I think I developed compatibility issues and set a maximum height of 300 pixels, with a workaround for IE6.

JS:

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

CSS

 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

There is a way to position an element in the middle of the page using pure CSS3 transforms, for example, for pop-ups and modal fields.

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

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

Remember all browser provider prefixes (e.g. -webkit- and -moz- ). Also remember that older browsers (IE9 or lower) do not recognize transform at all. For them you will need JavaScript polyfill.

Answer 4

I'm not sure I understood the whole question, but this is how you vertically and horizontally center the images:

Demo : http://jsbin.com/ukowar/1/edit

Centering in absolute position in combination with margin:auto

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

Hope this helps with your issue.