Fancybox beforeLoad Callback: Javascript, jQuery and referencing $this?

Question

I'm not sure how to accomplish what I'm looking to do, which, on starting out, seemed simple. I want to add a 'visited' class to a clicked link before calling the linked content into a fancybox iframe.

Fancybox works fine, as long as I leave off the beforeLoad call. When added, the page simply reloads the window, bypassing the Fancybox.

I'm not sure whether my beforeLoad function (here called add_visited) is allowed to use jQuery (as in addClass), or whether I need to stick to straight javaScript functionality (element.setAttribute("className", "visited")). The code pasted here is for jQuery, with a reference to a passed this in theClicked.

So, as you can see, I'm also not sure how to refer to $(this) in the function. Essentially I want to carry over this from the actual $.fancybox() call.

And, for clarity, .clinical_trial_link is a class applied to an anchor. In the actual code it's a.clinical_trial_link.

For further clarity, I've read a few conversations here discussing the relative merits of this method of marking links as visited. I get the downside to simply using a class, but on a site as link heavy as this one, seeing what's been clicked already is imperative.

Finally, the page in question is located here: http://pull4parkinsonsfoundation.org/clinical_trials/

The js, of course, will change from what's pasted here as I continue to thrash around like a mackeral with a keyboard. ;-)

Any help would be appreciated, and thanks in advance for the excellent work you all do on stackoverflow. This is the first time I've actually had to post a question in years!

Here's my code:

function add_visited(theclicked) {
    $(this).addClass('visited');
}

$(document).ready(function() {
    $('.clinical_trial_link').fancybox({
        'beforeLoad': add_visited($this),
        'maxWidth': 1222,
        'maxHeight': 1222,
        'fitToView': true,
        'width': '80%',
        'height': '90%',
        'topRatio': 0.2,
        'autoSize': false,
        'closeClick': false,
        'openEffect': 'elastic',
        'closeEffect': 'elastic'
    });
});

score 7 · Accepted Answer · answered Aug 14 '12 at 18:41

7

If what you want to do is to add a class to the selector bound to fancybox, refer to that element using $(this.element) within any of the fancybox callbacks like

$('.clinical_trial_link').fancybox({
  'beforeLoad': function(){
    $(this.element).addClass("visited");
  },
  'maxWidth': 1222,
  // other API options etc
});

answered Aug 14 '12 at 18:41

JFK

40,963
31
133
306

Excellent! That's it. On adding `.element` to `this`, I saw that the class was indeed added, but my link color wasn't changing. Upping the specificity of the css fixed that. Thanks so much! – dashard Aug 14 '12 at 19:33

wanovak · Answer 2 · 2012-08-14T16:30:10.390

0

When you did this:

'beforeLoad': add_visited($(this)),

$(this) became a parameter to the function. So use the parameter -- this has no context in the function.

function add_visited(theclicked) {
    $(theclicked).addClass('visited');
}

Or, alternatively, you could do this instead:

$('.clinical_trial_link').fancybox({
    'beforeLoad': function(){
        $(this).addClass('visited');
    },

For more on this, see this article.

edited Aug 14 '12 at 16:30

answered Aug 14 '12 at 16:20

wanovak

6,117
25
32

Thanks for the quick reply, but both versions fail in both Chrome and FF (Mac, current versions). I've tried all of that while thrashing around through my various tries at this. To be clear, no class is added (viewing the final source) and the link acts as originally described: bypassing Fancybox and reloading site in browser. – dashard Aug 14 '12 at 16:28
Ohhh, I missed your typo. It's `$(this)`, not `$this`. Pass the former as a parameter instead of the latter. If that doesn't work, just try `this`. – wanovak Aug 14 '12 at 16:29
I changed the code to the following *(relevant code only here)*: function add_visited(theclicked) { $(theclicked).addClass('visited'); } $(document).ready(function() { $('.clinical_trial_link').fancybox({ 'beforeLoad': add_visited(), // remaining parameter code... And the link opens in a Fancybox, but, of course, no `visited` class. FYI. – dashard Aug 14 '12 at 16:36
Change this `add_visited()` to `add_visited(this)` – wanovak Aug 14 '12 at 16:40
Nope. ;-) Clicked link opens in Fancybox, but no class is added. This code reads: function add_visited(theclicked) { $(theclicked).addClass('visited'); } ` $(document).ready(function() { $('.clinical_trial_link').fancybox({ 'beforeLoad': add_visited(this),` – dashard Aug 14 '12 at 16:49
I've tried `add_visited(this)`, `add_visited($(this))`, and `add_visited($this)`. – dashard Aug 14 '12 at 16:52
Can you create a jsfiddle? You can add your fancybox.js URL via additional resources – wanovak Aug 14 '12 at 17:10
I have a feeling the interactions will be too complex, but here's one: http://jsfiddle.net/eVuN8/ As this is my forst fiddle, let me know if anything needs to be done differently. Pasted ALL css and ALL js as it's clear one needs to, um, fiddle. – dashard Aug 14 '12 at 17:42

score 0 · Answer 3 · edited Nov 20 '18 at 16:46

0

Use this is in your fancybox parameters:

'beforeLoad': function() { 
     alert('test'); 
},

edited Nov 20 '18 at 16:46

Fabian Schmick

1,616
3
23
32

answered Nov 20 '18 at 15:08

Ankit Sewadik

1
3

Fancybox beforeLoad Callback: Javascript, jQuery and referencing $this?

3 Answers3

Linked