0

есть сайт https://editpress.ru/Home/Item/?id=1fcd1a9e-fb36-47ca-803c-018b41293aaa на нем подключен fancybox. Оригинальные картинки малы сами по себе. Как их увеличить в popup окне?

3
  • На сайт ходить не будем. 1. У <img width= height= есть теги задающие размер. Достаточно задать один из них больше размера - и размер увеличится.
    – nick_n_a
    Commented 12 сент. 2017 в 5:52
  • я пробовал так - #main-image { width:200%; height:200%; } не помогло. И вообще--если я задам теги как у Вас -будет ли это кроссбраузерно и кросс девайсово? Commented 12 сент. 2017 в 5:56
  • CSS не управляет атрибутами. Если вы уж так хотите через CSS, то переключите позицирование {position:relative; .... } тогда width и height будут иметь силу.
    – nick_n_a
    Commented 12 сент. 2017 в 5:58

1 ответ 1

0
$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        padding    : 0,
        margin     : 5,
        nextEffect : 'fade',
        prevEffect : 'none',
        autoCenter : false,
        afterLoad  : function () {
            $.extend(this, {
                aspectRatio : false,
                type    : 'html',
                width   : '100%',
                height  : '100%',
                content : '<div class="fancybox-image" style="background-image:url(' + this.href + '); background-size: cover; background-position:50% 50%;background-repeat:no-repeat;height:100%;width:100%;" /></div>'
            });
        }
    });

вот это немного помогло, но теперь картинка обрезается в модальном окне введите сюда описание изображения

введите сюда описание изображения

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.