Изменить наложение на fancybox в зависимости от ширины изображения

Question

Я новичок в javascript и jQuery, и я пытаюсь сделать слайд-шоу с помощью Fancybox. Проблема в том, что я хочу, чтобы изображения отображались на ящике того же размера, независимо от того, являются ли они портретными или ландшафтными изображениями. Мои изображения - либо 700 X 525 для пейзажа, либо 525 X 700 для портрета.

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

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

Благодарим за помощь.

Я использую FancyBox версии: 2.1.4 и я установил по умолчанию, как например:

 padding : 15, 
     margin : 20, 

     width  : 800, 
     height : 600, 
     minWidth : 100, 
     minHeight : 100, 
     maxWidth : 9999, 
     maxHeight : 9999, 

     autoSize : true, 
     autoHeight : false, 
     autoWidth : false, 

     autoResize : true, 
     autoCenter : !isTouch, 
     fitToView : true, 
     aspectRatio : false, 
     topRatio : 0.5, 
     leftRatio : 0.5, 

Answer 1

Я знаю, что этот пост 11 месяцев, но я думал, что я разделю свое решение в случае, если это помогает кто-то еще в будущем.

В основном я установил атрибут min-width css в элемент fancybox и сравниваю его с текущей шириной изображения, если он меньше. Я добавляю дополнение к элементу fancybox, так что элемент fancybox остается той же ширины, но изображение внутри горизонтально центрировано.

Шаг 1: в вашем css установите минимальную ширину элемента fancybox. Это та ширина, по которой вы хотите, чтобы ваш элемент fancybox оставался вне зависимости от ширины изображения.

.fancybox-wrap {min-width: 1120px; }

Шаг 2: добавить в функции постнагрузки при вызове FancyBox

$(".fancybox").fancybox({ 
    afterLoad: function(current) { 
     var $el = $(".fancybox-wrap").eq(0); // grab the main fancybox element 
     var getcurrwidth = current.width;  // grab the currrent width of the element 
     var getdesiredwidth = $el.css('min-width'); // grab our min-width that we set from the css 

     var currwidth = Number(getcurrwidth); 
     var desiredwidth = Number(getdesiredwidth.replace('px', '')); 


     if (currwidth < desiredwidth) 
     { 
      var custompadding = (desiredwidth - currwidth) * 0.5; // if the width of the element is smaller than our desired width then set padding amount 
      this.skin.css({'padding-left': custompadding+'px', 'padding-right': custompadding+'px' }); // add equal padding to the fancybox skin element 
     } 
    } 
});