Проблема размера контента Fancybox - PullRequest
Новая
       10

Проблема размера контента Fancybox

1 голос
/ 28 марта 2012

Я пытаюсь создать такой же пользовательский интерфейс для предварительного просмотра изображения, как на Facebook.
У меня есть один отдельный вид, который я отображаю в fancybox.
Должно быть, я сделал ту же ошибку с макс / мин ширина / высота. В основном, как я вижу, комментарий div всегда должен иметь ширину 340px. И размер изображения div можно изменять в зависимости от размера изображения. В изображениях ниже я использую более широкое изображение, чтобы лучше показать проблему. Я загружаю это так: 

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

Это нормально выглядит. Этот код внутреннего вида: 

<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>

Вот что я получаю сейчас: enter image description here И вот что я пытаюсь получить: enter image description here

UPDATE Проблема с уменьшенным изображением на основе ответа @ S.Visser. enter image description here

Ответы [ 2 ]

3 голосов
/ 28 марта 2012

Это может быть немного сложным для настройки, но вы можете рассмотреть мой " а-ля " способ facebook (с использованием fancybox v2.x):

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

Кстати, вы включили параметры API fancybox v1.3.x и v2.x в свой скрипт. Опции Fancybox в v2.x являются новыми и не совместимы со старыми версиями.

1 голос
/ 28 марта 2012

В этом примере я использую таблицу hack для центрирования изображения. Максимальная ширина и высота позволяют увеличить размер изображения.

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

...