Vimeo/Youtube AND images fails in IE - hopefully my stupid mistake?

[Gavin]

Hi All

First off thanks to the creators of this fantastic plugin, I'm very
impressed with it so far. Also a little warning - 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?

I'm working on a simple portfolio - http://www.gavinplatt.co.uk/elementis/blockfolio/index_vimeo.html

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 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. I've had a search but couldn't find any posts
describing the same issue.

[Gavin]

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 in advance for any help!

[mygoggie]

I think you need to use commas instead of spaces to multi select HTML elements - refer http://api.jquery.com/multiple-selector/

Therefore

$("ul.portfolio li a").fancybox({

should in fact read

$("ul.portfolio,li,a").fancybox({

etc

[Gavin]

Thanks for your reply. I think as I'm using jQuery I can use CSS-stye
selectors. I'm not trying to select all those elements - I'm trying to
select the anchor which is a descendant of the li and into the ul, if
that makes sense? This seems to be working fine as the images work
perfectly, it' s just the videos I'm having trouble with...

On Nov 23, 11:50 am, mygoggie <mygog...@purplescroll.com> wrote:
> I think you need to use commas instead of spaces to multi select HTML
> elements - referhttp://api.jquery.com/multiple-selector/
>
> Therefore

> /$("ul.portfolio li a").fancybox({
>
> /should in fact read
>
> /$("ul.portfolio,li,a").fancybox({/

[JFK]

@mygoggie: you either have to sleep more or drink less .... or both

@gavin
actually your script
$("ul.portfolio li a").fancybox({ ....
is affecting both, your iamges and your video links

IE is less tolerant than other browsers and gets confused what script
it should use
I guess your best bet is to assign a specific class to each <a> tag
within your ul.portfolio

so instead of
<ul><li><a href="img1.jpg" ...
use
<ul><li><a class="fancyimage" href="img1.jpg" ...

and change your script
$("ul.portfolio li a").fancybox({ ....
by
$("a.fancyimage").fancybox({ ....

so you will be separating what script affects to images and what
others to vimeo or youtube

[Gavin]

JFK - thank you so much! All working great now. This did actually
cross my mind when pasting my code above, so I tried just adding a
class ('vimeo'/'youtube') to the video anchors. However this was of
course still conflicting with the 'ul.portfolio li a' selector used
for images - rookie mistake I guess but one that needed pointing out.
Relieved this was a quick fix.

Thanks again for your help.