2014-10-07 1 views
1

나는 여러 라이트 박스를 사용하고있는 웹 사이트를 운영하고 있습니다. 그것은 IE7에서도 도처에서 정말 잘 작동합니다. :) 그러나 모바일에서는 닫기 버튼이 표시되지 않습니다.Fancybox 2.1.5는 모바일에 닫기 버튼을 표시하지 않습니다.

$(".fancybox").fancybox({ 
    beforeShow:function(){ 
     $('html, body').unbind("mousewheel", horizontalScroll); 
    }, 
    'arrows':true, 
    'overlayShow': true, 
    'autoScale': true, 
    'autoDimensions': false, 
    'modal': true, 
    'autoSize' : false, 
    'width' : '90%', 
    'showCloseButton' : true, 
    'hideOnOverlayClick':true, 
    'keys': { 
     "next": [13, 32, 34, 39], // enter, space, page down, right arrow, down arrow 
     "prev": [8, 33, 37] // backspace, page up, left arrow, up arrow 

    }, 
    afterShow : function() { 
     $('.fancybox-skin').append('<a title="Close" class="fancybox-item fancybox-close" href="javascript:jQuery.fancybox.close();"></a>'); 

    }, 
    afterClose : function() { 
     $('html, body').bind("mousewheel", horizontalScroll); 
    } 
}); 

웹 사이트는 다음과 같습니다 : http://ahnenwand.hiltl.ch 아니라 모든 사진 라이트 박스에 연결되어

내 코드는 다음과 같다. topleft에서 오른쪽으로 3 번, 아래로 8 번까지 더하기 기호를 클릭하면 테스트 할 수있는 라이트 박스가 열립니다.

JS 실수가없고 스프라이트도로드됩니다. 라이트 박스의 오른쪽 상단 모서리에 클릭하여 닫을 수 있지만 닫기 버튼이 표시되지 않습니다. 누구나 아이디어를 가지고

http://jsfiddle.net/bauralex/f2sx36gz/16/

나는 희망 - 여기

도 여기에 닫기 버튼 (죄송이 한 번만 후 다시로드해야 작동) 모바일에 표시되지 않는, 약간의 바이올린입니다

당신에게

알렉스

답변

1

내가 같은 문제 재치가 대단히 감사합니다 여기에 무엇이 잘못 될 수있다 h 비 모달 상자 (V 2.1.5). 내가 알았 듯이, 닫기 버튼에 대한 코드가 모바일 컨텍스트에서 누락되어 있으며 배경 이미지를 참조하는 것이 작동하지 않습니다.

afterLoad:function(curr, prev) { 
    if(!jQuery('a.fancybox-close').length) { 
     jQuery('.fancybox-outer').after('<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>'); 
     jQuery('.fancybox-close').css('background-image','url(/js/fancybox2/fancybox_sprite.png)'); 
    } 
} 

사용자 환경에서 fancybox_sprite.png에 경로를 조정해야합니다 : 내 솔루션은 후 부하 콜백을 통해 변경할 수 있었다.