Fancybox 2 width bug

Question

Я использую Fancybox 2 для его возможности изменять размер изображений в окне просмотра. Тем не менее, у меня есть несколько изображений, которые чрезвычайно широки (1000 x 100), и они не изменяются правильно. Они показывают огромные (видимо, изменение размера по всей ширине монитора?). Кодировка правильная и правильная работа с другими изображениями ... единственное различие - крайняя ширина.

Есть ли способ исправить это или мне придется отказаться от fancybox?

Answer 1

Как упоминалось в области комментариев, fancybox способен размещать изображения в окне просмотра, включая те широкие изображения, что и в вашем example.

причин, почему ваш пример не работает, как ожидается, являются:

1). Вам не хватает надлежащего DOCTYPE. Chrome и другие браузеры, включая Opera и IE, окончательно не будут играть хорошо без этого требования.

2). Изображения будут масштабироваться до маленьких экранов, ЕСЛИ они имеют либо свойства min-width, и/или min-height. Другими словами, если min-height изображения 200px, то изображение не будет уменьшать его width, если height соответствует минимальному набору, независимо от того, что вы продолжаете сокращать область просмотра. Это касается вашего широкого изображения.

Если вы проверяете fancybox documentation, вы найдете два свойства с установками по умолчанию:

minWidth Minimum width fancyBox should be allowed to resize to; 
      Default value: 100 

minHeight Minimum height fancyBox should be allowed to resize to; 
      Default value: 100 

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

$(document).ready(function() { 
    $('.fancybox').fancybox({ 
     minWidth: 10, // you can scale images as small as 10px wide 
     minHeight: 10 // you can scale images as small as 10px height 
    }); 
}); 

См. DEMO и играйте с уменьшением видового экрана с помощью Firefox или Chrome.