Fancybox 1.3.4 display form in the 'pop up' & loading animation when page loads

472 views
Skip to first unread message

Djonatan Buss

unread,
Aug 19, 2013, 11:09:38 AM8/19/13
to fanc...@googlegroups.com
Hi Guys, 

I'm having some problems using the older version. I will keep the older version because it is in use for several legacy pages in the system I'm working on. 
The problems are 2:

1 - I want to display a hidden div that contains a form, after another form is submitted ( email form + contact info form). If I do it with jQuery.fancybox.open('#form-hidden') using the fancybox 2.x it works, but if I try to use like jQuery('#form-hidden').fancybox(); using the fancybox 1.3.4  nothing happens. 
(can't use $, have to use jQuery instead)

2 - In my testing environment when I load the page there's the loading animation from nowhere in the middle of the page, have no idea why.

Please if you guys have any idea about what's wrong about all that let me know.

Thanks,

DJ

Djonatan Buss

unread,
Aug 19, 2013, 1:05:58 PM8/19/13
to fanc...@googlegroups.com
To be more clear about all this, All I need is to replace this code 
jQuery(document).ready(function() {
  jQuery
('#newsletter-form').submit(function() {
    jQuery
('#signup-form .email-field').val(jQuery('#newsletter-form .input').val());
    jQuery
.fancybox.open('#signup-form');
   
return false;
 
});
});

for something that works in the older version ( appears to me that the open function is something new, only present in the 2.x version

JFK

unread,
Aug 19, 2013, 7:36:15 PM8/19/13
to fanc...@googlegroups.com
since the method jQuery.fancybox.open() doesn't exist in v1.3.4.

you just need to replace this :
jQuery.fancybox.open('#signup-form');

by this :
jQuery.fancybox('#signup-form');

Djonatan Buss

unread,
Aug 20, 2013, 9:53:46 AM8/20/13
to fanc...@googlegroups.com
I tried it like this before, it displays the modal but with no content inside it. Just a white modal.

What I did as a workaround is that I created an anchor element using the href pointing to the hidden form div. Added a listener to the first form submit and invoked a click to that hidden anchor. It worked. can't understand how it should be without the workaround, if anyone knows I would rather have a clean code. 

jQuery(document).ready(function() {
   
// there is a link with the id callForm
   jQuery
("#callForm").fancybox({'overlayColor' : '#000000'});

   jQuery
('#newsletter-form').submit(function(e) {
      e
.preventDefault();
     
//when it is clicked it opens the hidden form.
      jQuery
("#callForm").click();

      jQuery
('#signup-form .email-field').val(jQuery('#newsletter-form .input').val());

     
return false;
 
});
});

Reply all
Reply to author
Forward
0 new messages