Reputation: 79
I having trouble to call fancybox. Amateur issues. Code below works fine when i try to open a video using fancybox iframe but last code doesnt. How can i fix it?
<a href="javascript:;" data-href="MBHD0790-03" class="iframe" ">WORKS</a>
$(".iframe").fancybox({
'width': 720,
'height': 410,
'type': 'iframe',
'autoScale': false,
'autoSize': false,
'autoDimensions': false,
'padding': 0,
'beforeLoad' : function(){
var url = $(this.element).data("href");
this.href = baseURL+'assets/media-video/'+url+'.php';
},
'beforeShow': function(){
$(window).on({
'resize.iframe' : function(){
$.fancybox.update();
}
});
},
'afterClose': function(){
$(window).off('resize.iframe');
}
});
When i use the code above my fancybox works fine, but when i try to call using another function doesnt work.
<a href="javascript:;" data-href="MBHD0790-03" onclick="vfancy(this)">DOESNT WORK</a>
function vfancy(){
fancybox({
'width': 720,
'height': 410,
'type': 'iframe',
'autoScale': false,
'autoSize': false,
'autoDimensions': false,
'padding': 0,
'beforeLoad' : function(){
var url = $(this.element).data("href");
this.href = baseURL+'assets/media-video/'+url+'.php';
},
'beforeShow': function(){
$(window).on({
'resize.iframe' : function(){
$.fancybox.update();
}
});
},
'afterClose': function(){
$(window).off('resize.iframe');
}
});
};
Upvotes: 0
Views: 163
Reputation: 41143
Your second code has 2 basic problems:
1). To call fancybox programmatically you need to invoke it within the jQuery scope like :
function vfancy() {
jQuery.fancybox({
// API options
});
};
...but you are using this
function vfancy() {
fancybox({
// API options
});
};
... which will never work.
2). Bear in mind that you can only use $(this.element)
within any fancybox callback if you have bound an element to fancybox (normally the <a>
element) but in this case you are invoking fancybox programmatically within an anonymous function so $(this.element)
is out of context.
What you have to do is :
a). get rid of the beforeLoad
callback altogether (which will do nothing)
b). pass the value of the data-href
attribute as the argument of the vfancy
anonymous function when you invoke it like
<a data-href="MBHD0790-03" onclick="vfancy(this.getAttribute('data-href'))" href="javascript:;" >IT WORKS NOW</a>
c). add the href
API option to your fancybox function and set its value from the argument passed to the anonymous function like
function vfancy(url) {
jQuery.fancybox({
href: baseURL + 'assets/media-video/' + url + '.php',
// other API options
});
};
Notice the anonymous function needs to accept the argument (vfancy(url)
). Also notice the comma after the href
API option if you add more options below.
See JSFIDDLE
EDIT
You can also pass this
as argument within the onclick
attribute like :
<a href="javascript:;" data-href="1_b.jpg" onclick="vfancy(this)">IT DOES WORK NOW</a>
... and get the value of the data-href
attribute within the vfancy
function like
function vfancy(url) {
var url = url.getAttribute('data-href');
jQuery.fancybox({
href: baseURL + 'assets/media-video/' + url + '.php',
// API options
padding: 0 //,
});
};
See updated JSFIDDLE
Upvotes: 1
Reputation: 193301
You need to invoke plugin properly on the object:
function vfancy(obj) {
$(obj).fancybox({
width: 720,
height: 410,
type: 'iframe',
autoScale: false,
autoSize: false,
autoDimensions: false,
padding: 0,
beforeLoad: function () {
var url = $(this.element).data("href");
this.href = baseURL + 'assets/media-video/' + url + '.php';
},
beforeShow: function () {
$(window).on({
'resize.iframe': function () {
$.fancybox.update();
}
});
},
afterClose: function () {
$(window).off('resize.iframe');
}
});
};
Upvotes: 0