0

In FancyBox2 I want to prevent bubbling of a element inside an element.
On both elements there is fancybox attached.
But if you click on the the inner element the outer element also fired.
How can I stop the event-bubbling?

HTML :

<div class="outside" data-fancybox-href="#content">OUT
    <div class="inside" data-fancybox-href="#content">IN</div>
</div>
<div id="content">content</div>

CSS : 

.outside {
    background :yellow;
    height:100px;
    width:100px;
}
.inside {
    background : orange;
    height:50px;
    margin:0 25px;
    width:50px;
}

#content
{
    display:none;
}

JS : 

jQuery(".outside").fancybox({
    beforeLoad: function () {
        alert("outside");
    }
});

jQuery(".inside").fancybox({
    beforeLoad: function () {
        alert("inside");
    }
});

Here is an example : http://jsfiddle.net/zrH6g/

EDIT 1
Fixed it by loading the content and with clicks http://jsfiddle.net/483uM/2/

EDIT 2
Edit 1 was a solution but it wasn't working since the content(DOM Elements) were copied and not moved. FancyBox 1 copies and paste the DOM Elements.
FancyBox 2 Moves it and puts it back(Cut/Paste).

What I've done now is I created a new div and click on that and remove it when fancybox closes.

//Results Cup
    jQuery('.beakerLink').click(function(event)
    {
        //Stop Default + Event Bubbling
        event.preventDefault();
        event.stopPropagation();

        //Set CSS Class + DataFancyBoxHref
        var fancyBoxRemoveCssClass = "NEED_TO_HIDE_THIS_AFTER_FANCYBOX_CLOSE";
        var dataFancyBoxHref = jQuery(this).attr("data-fancybox-href");

        //Dirty FIX : Add div to click for beaker link
        //Reason : Can't prevent event bubbling of beaker
        jQuery(".kalender_overview").append("<div class='" + fancyBoxRemoveCssClass + "' data-fancybox-href='" + dataFancyBoxHref + "'>REMOVE AFTER FANCYBOX CLOSES</div>");

        //Init FancyBox
        jQuery("." + fancyBoxRemoveCssClass).fancybox(
        {
            //Before Closing
            beforeClose: function()
            {
                //Remove Created Temp Div Element (Dirty FIX)
                jQuery("." + fancyBoxRemoveCssClass).remove();
            }
        });

        //Click
        jQuery("." + fancyBoxRemoveCssClass).click();
    });
VRC
  • 745
  • 7
  • 16
  • That's a tough one! This might help: http://stackoverflow.com/questions/9626434/jquery-fancybox-link-inside-div as might this: http://stackoverflow.com/questions/7632125/trigger-a-click-event-on-an-inner-element – Joe Spurling Mar 14 '13 at 16:17
  • Thanx for your links but I couldn't use that since you need to click double. 1 for the click and where the fancybox is initialized and then click again to load the click + fancybox = fancybox visible. I have fixed it differently though. http://jsfiddle.net/483uM/2/ – VRC Mar 14 '13 at 17:06

0 Answers0