I have used Fancybox on multiple occasions and never run into this problem. I have included both jQuery and Fancybox files in the header, linked up the first order button the the page to open up an iframe in a Fancybox. However I cant seem to get it to work at all. It doesn't open an iframe and instead goes straight to the page I was trying to open inside the Fancybox iframe.

Can somebody point out whatever blindingly obvious mistake I've made this horrible Monday morn?

Testing server can be found here:

.php

I have used Fancybox on multiple occasions and never run into this problem. I have included both jQuery and Fancybox files in the header, linked up the first order button the the page to open up an iframe in a Fancybox. However I cant seem to get it to work at all. It doesn't open an iframe and instead goes straight to the page I was trying to open inside the Fancybox iframe.

Can somebody point out whatever blindingly obvious mistake I've made this horrible Monday morn?

Testing server can be found here:

http://www.designti.me/testing/flipstick/original.php

• javascript
• jquery
• html
• css
• fancybox

4 Answers 4

The error message is: Uncaught TypeError: Object #<an Object> has no method 'fancybox'

Which implies that fancybox hasn't loaded. Taking a close look at your source we see <script type="text/x-ecmascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script> which you can see uses x-ecmascript rather than javascript. Change that and you should be fine.

You didn't put your code into the ready handler:

$(function() {                   // <-- you need this
    $("a.iframe").fancybox({ 
        //...
    });
});                              // <-- and this

Maybe to put it in document.ready?

$(document).ready(function() {
    $("a.iframe").fancybox({
         'width' : '75%',
         'height' : '75%',
         'autoScale' : false,
         'transitionIn' : 'none',
         'transitionOut' : 'none',
         'type' : 'iframe'
    });       
});

Use this:

jQuery(document).ready(function() {

      jQuery("a.iframe").fancybox({
        'type' : 'iframe',  //<--missing ma here
        'width':750,
        'height':500  //<-- removed last ma here
    });

});