Fancybox 2.1.5 doesn't show close button on mobile

Question

I have a website where I am using several lightboxes on it. It works everywhere really good, also in IE7 :), but in mobile it doesn't show the close button.

My code is the following:

    $(".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);
     }
});

The website is: http://ahnenwand.hiltl.ch but not all of the pictures are linked to a lightbox. Click on the plus sign, from topleft go 3 to the right and 8 down and there is a image that opens a lightbox to test it.

I don't have any JS mistake and the sprite is also loading. On the topright corner of the lightbox (on mobile) is the area where I can click to close it, but the close button doesn't show up.

Here is a little fiddle, also here the close button doesn't show up on mobile (it works only once then it must be reloaded - sorry)

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

I hope anyone has an Idea what could be wrong here

Thank you very much

Alex

Norderik Norderik · Accepted Answer · 2016-07-19T15:59:47

I have the same problem with a nonmodal box (V 2.1.5). As I found out, the code for the close button is missing in the mobile context, and referencing the background-image doesn't work. My solution was to make the changes via the afterLoad callback:

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)');
    }
}

Make sure to adjust path to the fancybox_sprite.png in your environment.

Fancybox 2.1.5 doesn't show close button on mobile

1 Answers