How to unbind fancybox from a selector

Question

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.

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, Dec 29 '11 at 19:39
Does this answer this question? http://stackoverflow.com/questions/3654085/unbinding-fancybox-on-thumbnail-fade — CantGetANick, Dec 30 '11 at 07:08
You might want to [check this thread][1]. It has the answer that helped me. [1]: http://stackoverflow.com/questions/13526599/unbind-destroy-fancybox-2-events — Pinny, Sep 23 '13 at 04:41
Doesn't this post cover the solution: http://stackoverflow.com/questions/13526599/unbind-destroy-fancybox-2-events — Blasi, Mar 14 '15 at 13:36

score 5 · Answer 1 · answered Mar 29 '12 at 12:41

5

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

answered Mar 29 '12 at 12:41

lafeber

2,683
1
27
29

score 2 · Answer 2 · answered Apr 09 '15 at 20:59

2

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

answered Apr 09 '15 at 20:59

Pavel Kukla

79
3

score 0 · Answer 3 · answered Mar 14 '15 at 13:33

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.

score 0 · Answer 4 · answered Dec 29 '11 at 19:59

0

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
}

answered Dec 29 '11 at 19:59

Shyju

214,206
104
411
497

removing class from the anchor tag in not working becoz dom collects all the elements before loading, even though i have removed the class that anchor is still being called in fancybox – Ranoy Dec 30 '11 at 04:54
Did you remove the class before binding the fancybox ? – Shyju Dec 30 '11 at 04:59
I removed the class first thing on page load, even in page source i can see the class is removed, but it still loads the fancybox – Ranoy Dec 30 '11 at 05:03
where do you bind the fancy box method ? which event ? documentready ? – Shyju Dec 30 '11 at 05:04
actually that anchor is in header, and binding is done in my js file for the site, may be if you can help me , i am goin to explain the whole prblm, – Ranoy Dec 30 '11 at 05:06
What you mean by header ? a master page ? include page ? Do you mind expanding your question including all these information ? – Shyju Dec 30 '11 at 05:08
the link is working fine, but when we are at the same page to which link is pointing , there we have that page at two place, one the webpage and other when we click on the link same page gets loaded in fancybx, since the page contains form it is creating problems becoz we have two forms with same id and textboxes on same page,, i just want to disable fancybox at this page so that even if user clicks on that link ,that page is reloaded again, not in the fancybox – Ranoy Dec 30 '11 at 05:09
header means just a bar showing login/register links it is being included – Ranoy Dec 30 '11 at 05:15
anyways solved it using different approach, didnt needed that link on the page removed it all together showing just text – Ranoy Dec 30 '11 at 05:40
1

$(this).after($(this).text()); $(this).remove(); – Ranoy Dec 30 '11 at 05:41

How to unbind fancybox from a selector

4 Answers4

Linked