Visible inline div disappears after display with fancyBox

Question

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

I have a <div> on my page that I wanted to allow the user to "scale" by clicking on the icon. <div> not hidden.

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

Decision:

I used fancyBox 2.1.2.

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

Then I used the jquery show function to display the div again.

My code for initializing a fancy window is below. Pay attention to the beforeLoad and afterClose functions to identify the parent <div> and return the <div> back to its parent object (thanks to this JFKDIAZ). Note the addition of $(inlineTarget).show(); to display the <div> again so that it does not disappear. The rest is the standard initialization 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 below. Note that the parent <div> must have an id so that the code can recognize it. The various class is the tag that I use to determine which <a> element the fancyBox should apply 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> 

It worked very well for me. All form elements have been moved to fancyBox and returned to their original position on the page.

UPDATE (moved the link to the violin from the comments) - for DEMO see http://jsfiddle.net/z8e9q/3/

I hope this helps someone who has the same problem.

Answer 1

I wrote this solution for fancybox v2.0.6 and below (I am also JFKDIAZ;). This problem was fixed with the new version v2.1.x + (a temporary placeholder was set to return the content to its original location), however, the NEW problem with v2.1.x + (v2.1.2 today) is that the content is indeed correctly returned, but hidden.

A new workaround (for version 2.1.x +) would be to simply make it visible afterClose as

 var tarGet; // initialize var at top of script 

callbacks

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

see forked violin

---

EDIT (March 27, 2014): To avoid global variables, as @ Henrik-Erlandsson pointed out 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 does not confuse the centering of images, is to put the class in the image and change the initialization in the document like this:

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

display: block is just an example for the above scenario used with FlexSlider 2. Of course, you can add any CSS fixes.

But the correction in Fancybox itself is a more correct 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>