2013-07-10 2 views
2

Интересно, можно ли установить пользовательскую ширину и высоту на изображениях fancybox?Пользовательская ширина и высота на fancybox image

В качестве стандарта ширина и высота fancybox изменяются относительно ширины и высоты изображений, но я хочу иметь ширину 800 и 600 на всех изображениях.

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

Может быть здорово, если бы кто-то может помочь мне с этим ... :)

  • TheYaXxE

ответ

15

Более простой способ изменить размер обоих, FancyBox открыли изображение и изображение FancyBox родительский контейнер с помощью beforeShow обратного вызова, как:

$(".fancybox").fancybox({ 
    fitToView: false, // avoids scaling the image to fit in the viewport 
    beforeShow: function() { 
     // set size to (fancybox) img 
     $(".fancybox-image").css({ 
      "width": 800, 
      "height": 600 
     }); 
     // set size for parent container 
     this.width = 800; 
     this.height = 600; 
    } 
}); 

См JSFIDDLE

ПРИМЕЧАНИЕ: это для FancyBox v2.x +


EDIT (апрель 2014 г.):

С текущей версии FancyBox (v2.1.5, как сегодня), это не нужно применять правила css к селектору .fancybox-image, так как изображения теперь настроены на отзывчивость (max-width: 100%;). this.width и только this.height будет делать трюк

$(".fancybox").fancybox({ 
    fitToView: false, 
    beforeShow: function() { 
     this.width = 800; 
     this.height = 600; 
    } 
}); 

См раздвоенный JSFIDDLE

+1

"редактировать (апрель 2014)" версия работает для меня –

+0

меня тоже .... спасибо. –

+0

спасибо bruhhh !! –

Смежные вопросы