CODEWITHSUNDEEP
javascriptjquerycallbackfancyboxfancybox-3
Auzzzy
Auzzzy

Reputation: 69

How to get ID of link that opened Fancybox3 within onComplete?

I have seen what looks like it could be the solution to this issue in other questions on stackoverflow, but NONE of them have worked.

I am trying to get the innertext of the link that was clicked to open Fancybox:

$("a.turnDateLink").each(function() {

              var that = $(this);

              $( "a.turnDateLink" ).fancybox({
                  'type': 'modal',
                  'onComplete': function() {

                      var currentday = $(that).text();
                      console.log(currentday);
                  },
                  'afterClose': clearCurrentDay,
                  'fullScreen' : false
              });

});

It only returns the innerText of the last a.turnDateLink. EVERY TIME! ugh.

Keep in mind that I would like to use the fancybox grouping with this.

See the Fancybox documentation to understand grouping: http://fancyapps.com/fancybox/3/docs/#usage

If you have a group of items, you can use the same attribute data-fancybox value for each of them to create a gallery. Each group should have a unique value:

Upvotes: 0

Views: 658

Answers (2)

Janis
Janis

Reputation: 8769

Check documentation about events - http://fancyapps.com/fancybox/3/docs/#events

The first examaple contains useful tips, including how to find clicked element:

onComplete: function( instance, slide ) {

    // Tip: Each event passes useful information within the event object:

    // Object containing references to interface elements
    // (background, buttons, caption, etc)
    // console.info( instance.$refs );

    // Current slide options
    // console.info( slide.opts );

    // Clicked element
    // console.info( slide.opts.$orig );

    // Reference to DOM element of the slide
    // console.info( slide.$slide );

}

Upvotes: 3

Hikmat Sijapati
Hikmat Sijapati

Reputation: 6994

Try like this.Change $( "a.turnDateLink" ) to that.

$("a.turnDateLink").each(function() {

                  var that = $(this);

                  that.fancybox({
                      'type': 'modal',
                      'onComplete': function() {
                          $("#currentday").html('');

                          var currentday = that.text();
                          console.log(currentday);
                      },
                      'afterClose': clearCurrentDay,
                      'fullScreen' : false
                  });
    });

Upvotes: 0

Related Questions