FancyBox 3로 이미지 높이 가져 오기

Question

fancybox로 보낼 이미지의 높이를 사용하여 If/then in fancybox를 만드는 데 문제가 있습니다. 본질적으로

setBigImage : function (slide) { 
var self = this; 
var $img = $('<img />'); 

slide.$image = $img 
.one('error', function() { 

self.setError(slide); 

}) 
.one('load', function() { 

slide.width = this.naturalWidth; 
slide.height = this.naturalHeight; 

.addClass('fancybox-image ') 
.attr('src', slide.src) 
.appendTo(slide.$content); 

는, 나는를 추가 할 찾고 있어요 경우/다음 이미지의 높이가 500 픽셀보다 큰 있는지 확인하는 .addClass 호출하기 전에. 나는 다음을 사용하려고 시도했다 :

if (slide.Width > 500) 
and if (this.NaturalHeight > 500) 

어느 쪽도 효과가 없다. slide.Width와 this.N 태그의 태그 내부에있는 NaturalHeight를 사용하여 어떤 텍스트를 출력했는지 확인했습니다. 불행히도 이미지의 두 번째 인스턴스를 만들었습니다. 이미지의 높이를 얻는 가장 좋은 방법은 무엇입니까?

양해 해 주셔서 감사합니다.

Answer 1

먼저,이 오해를 분명히하자. "유감스럽게도 그들은 이미지의 두 번째 인스턴스를 만들었습니다." 기본 라이트 박스 스크립트를 사용할 때, 사용자는 썸네일을 클릭 한 직후 아이콘을 로딩 할 때 검은 색 오버레이를 보게 될 것이고 이미지가 팝업됩니다. 그러나 fancybox는 실제 이미지가로드되는 동안 미리보기 이미지 (첫 번째 이미지)를 표시합니다. 그런 다음 실제 이미지 (두 번째 이미지)가 첫 번째 이미지 위에 점차 나타나고 사용자는로드 표시기를 보거나 인식하지 못할 가능성이 큽니다.

질문에 대한 대답은 단순, 그냥 BTW

if (slide.width > 500)

와

if (slide.Width > 500)

교체, 이미지의 크기에 따라 더 많은 사용자 정의를 허용 fancybox의 다음 버전, 참조 이 데모 - https://codepen.io/anon/pen/mqQLVm?editors=1010 및 https://codepen.io/anon/pen/yPQjbw?editors=1010