CODEWITHSUNDEEP
jquerycssresponsive-design
SeanWM
SeanWM

Reputation: 17009

Responsive Magnific Popup

I'm using Magnific Popups ajax popup to to create a popup experience somewhat like Instagram or Facebook (image on the left, comments on the right, etc). How would I go about setting a max height for the entire lightbox and center the image when it can be centered vertically? This needs to work in all browsers and has to be responsive which is tricky. I can't seem to get it working properly across all browsers. I suppose I don't mind a jQuery solution as this is what I might need.

The image and content are floated as such:

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

And the float is just cleared with the screen size is reduced using media queries.

I've made a jsfiddle to help understand what I'm trying to explain:

jsFiddle

Try re-sizing the iframe to check out the effect.

Upvotes: 6

Views: 1982

Answers (4)

user1721135
user1721135

Reputation: 7092

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

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

Centering via absolute position in combination with margin:auto

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

Hope that helps with part of your problem.

Upvotes: 1

apaul
apaul

Reputation: 16180

Working Example

I think I've worked out the compatibility issues and set a max-height of 300px, 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 */
    }
}

Upvotes: 2

Jared
Jared

Reputation: 3016

There's a way to position an element in middle of the page using purely CSS3 transforms, such as for popups and modal boxes.

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

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

Don't forget all of the browser vendor prefixes (such as -webkit- and -moz-). Also remember that older browsers (IE9 or below) won't recognise transform at all. You'll need a JavaScript polyfill for them.

Upvotes: 1

Or Duan
Or Duan

Reputation: 13860

the best way will be jqueryUI resize.

if you want that your div(the container) will change by the windows size you should do somesing like that:

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

Upvotes: 2

Related Questions