CODEWITHSUNDEEP
magentofancybox
Senthil
Senthil

Reputation: 444

Magento Fancybox

I am new to Magento, in the checkout page. I have a text field and onblur of the text field will open a fancy box popup. so in the checkout.phtml I placed a div to show their content in the pop up and set CSS attribute display as none.

In on blur I called a JS function and load the poup, for that I write the JS function - jQuery(".zipformcont").fancybox().trigger('click');

zipformcont is class name of div.

The issue is pop up is loading with an error - "The requested content cannot be loaded. Please try again later."

Please help me to fix this. thanks.

Upvotes: 0

Views: 4804

Answers (4)

princespn
princespn

Reputation: 31

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".fancybox").fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        iframe : {
            preload: false
        }
    });
});     
</script>

<script type="text/javascript" src="http://dev.smartparcelbox.com/skin/frontend/rwd/default/js/jquery.fancybox.pack.js"></script

Upvotes: 0

Senthil
Senthil

Reputation: 444

I tried another option and it is working fine now. Option 1) Created a div with CSS attribute - display as none

<div style="display:none"><a id="azcodelink" href="#zipcode_form">test</a></div>

2) In the textfield, Onblur called a JS function

<input type="text" name="namefld" id="namefld" value="" onblur="openpopup()" />

3) In the JS function, I trigered the click function of "azcodelink"

function openpopup() {
    $("#azcodelink").trigger('click');
}

4) The id - zipcode_form - has the pop up content

<form id="zipcode_form">
...
</form>

Thats all..

Thanks for all your support.

Upvotes: 0

Robert
Robert

Reputation: 816

jQuery(function(){
   jQuery('#zipcode').blur(function(){
      jQuery.fancybox({
         "content":$('#formcontainer'),
         "hideOnContentClick": true,
         "hideOnOverlayClick": true
      });
   });
});

This should do it and get rid of the onblur attribute

Upvotes: 0

Robert
Robert

Reputation: 816

Instead of using .trigger(); why not call fancybox like this:

jQuery.fancybox();

Fancybox triggers depending on the selector its connected to. Not the div its going to open.

Upvotes: 1

Related Questions