CODEWITHSUNDEEP
jqueryhtmlcssjquery-pluginsfancybox
1110
1110

Reputation: 6829

Fancybox content size issue

I am trying to make the same user interface to preview image like on facebook.
I have one separate view that I display in fancybox.
It must be that I have made same error with max/min width/height. Basically as I see comment div should be 340px width always. And image div is resizable based on image size. In images bellow I use wider image to better show problem. I load it like this:

$(document).ready(function () {
        $('.fancybox').fancybox({
            'autoSize': true,
            'autoDimensions': true,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'hideOnOverlayClick': false,
            'hideOnContentClick': false,
            'closeBtn': false,
            'type': 'ajax',
            'padding': 0, 
            'margin': 0,                        
            'minWidth': 500,
            'fitToView': true
        });
    });

It load view fine. That inner view code is:

<div style="height: 610px; width: 1100px;">
    <div style="float: left; max-width: 510px;">
        <img style="max-height: 100%;" src="http://a4.sphotos.ak.fbcdn.net/hphotos-ak-ash4/393726_2631619232954_1329592446_32973068_1109612286_n.jpg" />
    </div>
    <div style="float: right; width: 340px; height: 100%; background: #ff0000;">
        <h3>
            Description</h3>
    </div>
</div>

This is what I get now: enter image description here And this is what I am trying to get: enter image description here

UPDATE Issue with smaller image based on @S.Visser answer. enter image description here

Upvotes: 1

Views: 4183

Answers (2)

S.Visser
S.Visser

Reputation: 4725

In this example I use a table hack to center the image. The max width and height are there to make sure the image dont size to big.

html

<div id="popup-container">

    <div class="image">
          <img src="http://a4.sphotos.ak.fbcdn.net/hphotos-ak-ash4/393726_2631619232954_1329592446_32973068_1109612286_n.jpg" alt="" />
    </div>

    <div class="description">
        <h3>Description</h3>
    </div>

    <div class="clear"></div>

</div>

css

#popup-container {
    height: 610px;
    width: 1100px;
    display: table;
}

#popup-container .image {
    display: table-cell;
    vertical-align: middle;
    background-color: #000;
}

#popup-container .image img {
    max-height: 100%;
    max-width: 760px;
}

#popup-container .description {
    width: 340px;   
    background-color: #FFF;
    height: 610px;
}

.clear {
    clear: both; 
}

Output: Output

Upvotes: 1

JFK
JFK

Reputation: 41143

That may be a bit of work to customize, but you may consider my "a la" facebook way (using fancybox v2.x):

http://picssel.com/playground/jquery/fancyboxALAfacebook_26Mar12.html

BTW, you included API options of fancybox v1.3.x and v2.x in your script. Fancybox options in v2.x are new and not compatible with older versions.

Upvotes: 3

Related Questions