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

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
Fancybox 2 Title “Inside” on YouTube (iframe)?
fancy box prev and next buttons // how to show in some and not others
Fancybox 2 not showing when calling .open()
Audio continues after fancyBox closes

Categories

HOME
openlayers
cloud
wso2
amazon-ec2
magnific-popup
layout
raspberry-pi
office365api
syntax
spring-jdbc
blueprintjs
directx
pheatmap
esper
awesome-wm
elasticsearch-hadoop
metatrader4
here-api
user-input
windows-phone-7
size
jsprit
iolanguage
worldwind
pythonanywhere
swiftlint
ml
pass-by-reference
php-openssl
internet-explorer-9
virtualdub
strncpy
elasticsearch-ruby
siesta-swift
column-family
grails-3.1
repo
mpmediaquery
nssegmentedcontrol
bytecode-manipulation
http-digest
overlap
theano.scan
mesos-chronos
dynamic-reports
texmaker
powershell-dsc
janrain
eigenvalue
password-encryption
no-www
executenonquery
flickr-api
promela
logparser
pnotify
rdfs
sqldf
spring-mongodb
orthogonal
vtigercrm
objective-c-swift-bridge
grails-tomcat-plugin
gridpane
removechild
rotativa
itextpdf
cloudbees
freelancer.com-api
ios8-today-widget
vhd
ionic
splash
sysinternals
sortedlist
system32
nsmutabledictionary
coldbox
cdt
javafx-webengine
applescript-objc
client-side-templating
gulp-less
document-classification
php-5.4
android-radiobutton
heisenbug
meteor-velocity
mbr
quantlib-swig
aqtime
ruby-datamapper
ftps
easy-install
dataadapter
sqlperformance
kyotocabinet
multipage
javax.script
mysql-error-1005
asp.net-profiles
firefox4
memory-size
privilege
signal-handling

Resources

Database Users
RDBMS discuss
Database Dev&Adm
javascript
java
csharp
php
android
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App