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.

Templar

post some query and html, u can use jsfiddle.net for that – Caliper

I was posting the solution as an answer to the question, but I was not allowed as my reputation is too low as a first time poster to answer my own question. I have now included my solution in my original question. Thanks! – Templar

I have set up this solution using jsfiddle as suggested by Dejan at http://jsfiddle.net/z8e9q/3/ – Templar

This effect is typically achieved by clicking the "Answer your own Question" button below the question. Reformat, please? – Dermott

Thanks @Code Monkey. JFK has posted a better solution below, so I will leave as is, and leave JFK's solution as the solution. – Templar

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

Siderostat

Thanks @JFK. I did not know that the latest version of fancyBox has addressed the problem of the content being returned to its original parent. Thank you for the original solution, and for this easy addition to display the <div> after the fancyBox window closes. – Templar

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.

Chrysarobin

there is a slight difference between the target and the trigger of fancybox. The issue as in the OP applies for inline content only. In that case a class to the target element would be more suitable. – Siderostat

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>

Anglesite