CODEWITHSUNDEEP
javascriptjqueryfunctionfancybox
Alvaro
Alvaro

Reputation: 79

Fancybox issues with different method to call

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

Answers (2)

JFK
JFK

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

dfsq
dfsq

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

Related Questions