FancyBox plugin, hopefully a simple mistake

Hi All

I’m working on a simple portfolio (view here) using the excellent [URL=“http://fancybox.net/”]FancyBox plugin. I’m actually a bit sheepish asking this question as I’m guessing it’s something with my Javascript, rather than an issue with the FancyBox plugin. Still, hopefully you can point me in the right direction?

Here’s the issue:

  1. Images work perfectly with FancyBox and look great in all browsers
    I’m testing

  2. If I add Vimeo or Youtube content (as per these [URL=“http://fancybox.net/blog”]instructions) on the same page alongside
    images, this works fine in FF/Safari/Chrome - both the images and
    videos are displayed brilliantly

  3. In IE the video content fails. The FancyBox loading animation
    appears, but the modal window never actually loads. IE throws out this
    error: ‘Permission denied’

If I remove the Javascript that applies to images, and leave in just
the vimeo or youtube code, then the videos load fine. However, I need
to be able to have images and videos on the same page.

Any ideas on what’s causing this problem and how to resolve would be
hugely appreciated.

Thanks in advance!

Here’s the Javascript I’m using:


    <script type="text/javascript">
            $(window).load(function() { //wait for images to load

                    /* Apply fancybox to multiple items */

                    $("ul.portfolio li a").fancybox({
                            'padding': 0,
                            'overlayColor': '#222222',
                            'overlayOpacity': 0.6,
                            'titleShow': 'false',
                            'transitionIn': 'fade',
                            'transitionOut': 'fade'
                    });

                    $("li.form a").fancybox({
                            'type': 'iframe',
                            'width': 480,
                            'height': 540,
                            'scrolling': 'no',
                            'padding': 0,
                            'overlayColor': '#222222',
                            'overlayOpacity': 0.6,
                            'titleShow': 'false',
                            'transitionIn': 'fade',
                            'transitionOut': 'fade',
                            'margin': 0
                    });

                    $(".vimeo").click(function() {
                            $.fancybox({
                                            'padding'               : 0,
                                            'autoScale'             : false,
                                            'transitionIn'  : 'none',
                                            'transitionOut' : 'none',
                                            'title'                 : this.title,
                                            'width'                 : 600,
                                            'height'                : 338,
                                            'href'                  : this.href.replace(new

RegExp(“([0-9])”,“i”),‘moogaloop.swf?clip_id=$1’),
‘type’ : ‘swf’,
‘swf’ : {
‘wmode’ : ‘transparent’,
‘allowfullscreen’ : ‘true’
}
});

                            return false;
                    });

                    $(".youtube").click(function() {
                            $.fancybox({
                            'padding': 0,
                            'overlayColor': '#222222',
                            'overlayOpacity': 0.6,
                            'titleShow': 'false',
                            'autoScale'             : false,
                            'transitionIn'  : 'none',
                            'transitionOut' : 'none',
                            'title'                 : this.title,
                            'width'                 : 680,
                            'height'                : 495,
                            'href'                  : this.href.replace(new RegExp("watch\\\\?v=", "i"), 'v/'),
                            'type'                  : 'swf',
                            'swf'                   : {
                                                                     'wmode'                : 'transparent',
                                                                     'allowfullscreen'      : 'true'
                                                              }
                            });

                            return false;
                    });

            });
    </script>

If I remove the $(“ul.portfolio li a”).fancybox({… and $(“li.form
a”).fancybox({… functions then the video content works fine -
however I need to be able to have both kinds of content alongside each
other on the same page.

Thanks again for any help.

FIXED - see here for solution - http://groups.google.com/group/fancybox/browse_thread/thread/7a1ca52b2eb01d32