SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    FancyBox plugin, hopefully a simple mistake

    Hi All

    I'm working on a simple portfolio (view here) using the excellent 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 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!

  2. #2
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •