I have an anchor link with a class which identifies it to be called on fancybox. example:

<a class="group">some code here</a>

Fancybox binding:

$('.group').fancybox();

If I want to unbind fancybox with elements selected by $('.group'), how should I do that? I have tried removeClass('group') but its not working.

I have an anchor link with a class which identifies it to be called on fancybox. example:

<a class="group">some code here</a>

Fancybox binding:

$('.group').fancybox();

If I want to unbind fancybox with elements selected by $('.group'), how should I do that? I have tried removeClass('group') but its not working.

• javascript
• jquery
• fancybox

• sorry eg is like < a class="group"> – Ranoy Commented Dec 29, 2011 at 15:35
• It would be possible to remove any class bound to fancybox from the anchor so fancybox won't be enabled on such anchor. The trick is how to identify the anchor in order to use the proper method. Could you clarify how do you want to remove the class: after specific event or just on page load? – JFK Commented Dec 29, 2011 at 19:39
• 1 Does this answer this question? stackoverflow./questions/3654085/… – CantGetANick Commented Dec 30, 2011 at 7:08
• You might want to [check this thread][1]. It has the answer that helped me. [1]: stackoverflow./questions/13526599/… – Pinny Commented Sep 23, 2013 at 4:41
• Doesn't this post cover the solution: stackoverflow./questions/13526599/… – Blasi Commented Mar 14, 2015 at 13:36

4 Answers 4

$('.group').unbind('click.fb')

You can add class "nofancybox" to link and this link will be ignored

If you want to do it in javascript code, You may select the anchor tag object and remove the class.

Give an id to the element and call the removeClass method

<a id="noFancy" class="group">some code here</a>

Java Script

 $(function(){
     $("#noFancy").removeClass("group");

 });

If you have access to the HTML markup , why not just change to class to something else but with the same CSS values. then you dont need to execute the code to remove the class on documentready

HTML

<a class="groupNormal">I dont want fancybox</a>

CSS

.groupNormal
{
  // Put the CSS for group class
}

Here is the solution that worked for me, however it does not unbind the fancybox in the sense of how the questioner would like to do it.

First, don't declare the fancybox on node, but bind the node to click event instead:

$(".classOfMiniImage").on("click", window.onImageMiniClicked);

In the handler, you can use your code to check conditions whether you need to display the fancybox or not, and then display it with explicit href reference:

window.onImageMiniClicked = function () {
    if (<your_condition>) {
        $.fancybox({
            'href': <link_to_full_size_image>,
            /* other options below */
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'speedIn': 600,
            'speedOut': 600,
            'overlayShow': true
        });
    }
}

Also, you can use a bit another approach and to unbind this handler manually if you don't need the fancybox on these items anymore:

$(".classOfMiniImage").off("click", window.onImageMiniClicked);

Hope it will help someone.