Есть ли способ предотвратить изменение размера изображения простым модальным способом? - PullRequest
Новая
       12

Есть ли способ предотвратить изменение размера изображения простым модальным способом?

0 голосов
/ 01 декабря 2011 
    $('a.enlarge').click(function() {
        $('#modal-image').modal({
            overlayClose: true,
            opacity: 50,
            minHeight: 462,
            minWidth: 656,
            overlayCss: {
                backgroundColor: '#fff'
            },
            appendTo: '#the-media'
        });

        return false;
    });


<div id="modal-image" style="display:none">
   <img src="someimage.jpg" width="462" height="656" id="myImage" />
</div>

Изображение 462px x 656px, но simplemodal продолжает масштабировать его до 620px x 656px. Я попытался добавить аргументы minheight и minwidth к js, атрибуты width и height к тегу изображения и даже к этому css: 

#myImage { width: 462px !important; height: 656px !important; }

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

Ответы [ 3 ]

1 голос
/ 01 декабря 2011

Простой модал также поддерживает maxWidth и maxHeight в соответствии с документацией , если вы установите их, а также minWidth и minHeight, вы должны эффективно увеличивать размер модала.

Я не могу комментировать вопрос о том, автоматически ли она добавляет полосу прокрутки, но вы можете самостоятельно настроить таргетинг на элемент в CSS и применить overflow:auto; к элементу контейнера изображений, если это не так.

0 голосов
/ 04 декабря 2011

Фу, наконец-то заставил его работать, добавив это к тегу изображения: 

<img src="someimage.jpg" width="462" height="656" style="width: 462px !important; height: 656px !important" />

В основном пришлось перемещать css inline, простой модал, вероятно, изменяет этот стиль для масштабирования изображений. Хотя, когда я посмотрел на html-вкладку firebugs, я не увидел никаких дополнительных стилей, добавленных простым модальным тегом image, поэтому я был ошеломлен. Так что я до сих пор не уверен, почему это работает, но работает, подумал, что опубликую это на тот случай, если у кого-то возникнет такая же проблема.

0 голосов
/ 01 декабря 2011

Из документации видно, что вы должны применить свой CSS, используя containerCss. Кроме того, свойства CSS в jQuery обычно заключаются в строки.

...