fancybox-2


Fancybox 2.1.5 doesn't show close button on mobile


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
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.

Related Links

fancybox2 dialog is hidden on touch devices
FancyBox attach more href
fancybox open iframe when clicking different element
Fancy box will not work
Deeper documentation for Fancybox2?
“Clicking” to advance image on a mobile device
Open image in Fancybox 2 in fullscreen not sized [SOLVED]
Fancybox 2 multiple titles
Fancybox 2.1.5 doesn't show close button on mobile
Images will not pop up in FancyBox.
Fancybox2 api open() ignores options?
fancyBox 2 Vimeo embedding not working
Jquery Fancybox-media prev and next buttons need three clicks to work
Fancybox quicktimes loading properly locally but not on server
Skip 404 links with fancybox2
Fancybox data-fancybox-type=“iframe” and Strict XHTML Doctype

Categories

HOME
webpack
debugging
zeromq
openstack
oracle11g
onedrive
paw-app
baqend
ebean
fingerprint
contact
adobe-analytics
collectd
google-apps-marketplace
spring-tool-suite
moonmail
orchardcms
ibm-odm
msp430
jsprit
lombok
telephony
ef-migrations
introduction
arabic
numerical-methods
poltergeist
elasticsearch-ruby
xmlreader
accelerate-framework
html5-fullscreen
host
code-search-engine
document.write
opshub
galen
fedex
dynamic-reports
glew
outlook-api
checkboxlist
angular-resource
fault
scrollable
alphabet
return-value
lift-json
font-size
or-tools
specrun
static-ip-address
color-picker
radtreelist
slicknav
websitepanel
simplewebrtc
moveit
qcustomplot
superstack
rhino-servicebus
itextpdf
netmq
qdialog
embedded-code
map-projections
service-accounts
unity3d-gui
iiviewdeckcontroller
composite
geonetwork
sorl-thumbnail
qpainter
client-side-templating
websocket4net
document-classification
onactivityresult
has-many-through
heisenbug
ember-charts
apc
jplaton
buster.js
gridcontrol
yui-compressor
browser-detection
funscript
hgsubversion
spyware
vdsp
pyinotify
dmx512
phonon
sustainable-pace
gacutil
zune

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App