Использование плагина Fancybox jQuery для отображения встроенного содержимого (изображения и текста), которое динамически изменяется при отображении - PullRequest
1 голос
/ 10 февраля 2012

Используя плагин Fancybox jQuery.

Я смог заставить его отображать изображения нормально.И я смог заставить его отображать встроенный контент, такой как div с несколькими абзацами внутри.С обоими из них, когда контент отображается в fancybox, вы можете изменить окно браузера на разные размеры, а окно контента fancybox также изменит свои размеры.

Теперь моя проблема.Вместо того, чтобы просто отображать изображения, мне нужно отобразить изображение с 3-4 предложениями текста прямо под изображением.

Для своей попытки я использовал метод встроенного содержимого.Мой встроенный контент был примерно таким:

<div style="display: none">
    <div id="content-div">
        <img src="images/product1.jpg" alt="" />
        <p>My several lines of text would go here.</p>
    </div>
</div>

Когда fancybox отображает этот контент, это всегда немного странно.Например, текст обрезается, и появляются полосы прокрутки.Он никогда не делает то, что я хочу, то есть обрабатывать изображение и текст как единое целое, и динамически изменяет размер как изображения, так и текста, как это происходит, когда вы только отображаете и изображение, или только отображаете HTML-текст.

Я видел примеры, когда вы можете отображать встроенный контент в fancybox с предустановленными шириной и высотой, но я хочу, чтобы он менял размер в зависимости от размера вдовы браузера пользователя.

Можно ли это сделать?Есть ли какой-то вариант, который мне не хватает?

1 Ответ

1 голос
/ 10 февраля 2012

fancyBox читает ширину / высоту перед отображением и не загружает изображения. Поскольку изображения могут загружаться позже, они могут расширить родительский элемент и вызвать появление полос прокрутки. Простейшим решением было бы установить размеры для встроенного изображения, например <img src=".." width="200" height="100" />

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...