Visible inline div disappears after being displayed with fancyBox

Question

I am posting a problem and solution here to help anyone who has experienced the same problem as me.

I have a <div> on my page which I wanted to allow the user to 'zoom' to by clicking on an icon. The <div> is not hidden.

I used fancyBox (fancyBox home page) to display the <div> as a sort of modal window. The reason I used fancyBox over other lightbox type plugins is that it does not duplicate the contents of the <div>, but moves it, so all form elements, etc. continue to work. The problem is that after closing the fancyBox window, the <div> is hidden on the main page.

The solution:

I used fancyBox 2.1.2.

I used a solution posted by JFKDIAZ on github (https://github.com/fancyapps/fancyBox/issues/103) to ensure that the div was returned to its parent after closing the fancyBox window.

I then used the jquery show functionality to display the div inline again.

My code to initialise the fancy box is below. Note the beforeLoad and afterClose functions to identify the parent <div> and return the <div> back to its parent (thanks to JFKDIAZ for this). Note the addition of $(inlineTarget).show(); to display the <div> again so that it does not disappear. The remainder is the standard initialisation for fancyBox.

        $(document).ready(function() {
        $(".various").fancybox({
            beforeLoad: function() {
                inlineTarget = this.href;
                parentNodename = $(inlineTarget).parent().get(0).tagName.toLowerCase();
                $(inlineTarget).parent(parentNodename).addClass("returnTo");
            },
            afterClose: function() {
                $(inlineTarget).appendTo(".returnTo");
                $(".returnTo").removeClass("returnTo");
                $(inlineTarget).show();
            },
            maxWidth: 880,
            maxHeight: 600,
            fitToView: false,
            width: '70%',
            height: '70%',
            autoSize: false,
            closeClick: false,
            openEffect: 'none',
            closeEffect: 'none'
        });
    });

My code for the <div> and the link to display the <div> in the fancyBox is below. Note that the parent <div> must have an id so that the code can recognise it. The class various is the tag I use to identify which <a> element I must apply the fancyBox to.

    <a href="#application_form" class="various">Zoom</a>
    <div id="application_parent">
        <div id="application_form">
            Contents to display in fancyBox and return back here when complete.
        </div>
    </div>

This worked for me very well. All form elements were moved to the fancyBox and back to their original position on the page.

UPDATE (moved link to fiddle from comments) - For a DEMO see :http://jsfiddle.net/z8e9q/3/

I hope this helps someone who has the same problem.

Answer 1

I wrote that solution for fancybox v2.0.6 and below (I am JFKDIAZ too ;). That issue has been fixed with the new release v2.1.x + (a temporary placeholder has been set to return the content to its original place), however the NEW issue with v2.1.x + (v2.1.2 to date) is that the content is indeed properly returned but hidden.

The new workaround (for version 2.1.x +) would be just to make it visible afterClose like

var tarGet; // initialize var at top of script

the callbacks

beforeShow: function(){
 tarGet= this.href;
},
afterClose: function(){
 $(tarGet).show();
}

see forked fiddle

---

EDIT (March 27, 2014) : To avoid global variables as pointed out by @Henrik-Erlandsson in his answer, you could simply do :

afterClose: function(){
  $(this.href).show();
}

See forked JSFIDDLE

Answer 2

A shorter solution that avoids global variables, works with multiple images (galleries, sliders), and doesn't mess up image centering is to put a class on the images and modify the initialization in document ready like this:

$(".fancybox").fancybox({
    afterClose: function(){
     $(".fancybox").css("display","block");
    }
});

display:block is just an example for the above scenario used with FlexSlider 2. You could add any CSS fixes you want, of course.

But a correction in Fancybox itself is the more proper way.

Answer 3

<a href="#application_form" class="various">Zoom</a>
<div id="application_parent" style="display:none">
    <div id="application_form">
        Contents to display in fancyBox and return back here when complete.
    </div>
</div>