add class to php generated element with jquery - php

Question

I need some help. I am bringing in a string from a custom field in wordpress. This string is an iframe embed code for both youtube and vimeo. I need to add a class to this iframe in order for fancybox to do its thing.
<?php
$videoLinks=get_post_meta($post->ID, "iframe video embed code", true);
echo $videoLinks;?>
<script>
$('iframe').addClass('fancybox fancybox.iframe');
</script>
When testing by inserting an iframe embed code in the custom field I get this. (no class added)
<iframe src="http://player.vimeo.com/video/33039612?title=0&byline=0&portrait=0" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe><p>HG Skis: Trillinton.. from HG Skis on Vimeo.</p> <script>
$('iframe').addClass('fancybox fancybox.iframe');
</script>
Relatively new to jquery, fancybox works on images manually tagged with fancybox class. Will adding class based on a certain event fix my issue?

Answer 1

try
<script>
$(document).ready(function(){
$('iframe').addClass('fancybox fancybox.iframe');
});
</script>
it should play the trick... of course, I assume you are using fancybox v2.x

Answer 2

It's possibly about timing. If fancybox is operating via a script that fires automatically on DOM ready, looking for "fancybox" elements to attach event handlers to, it might have already done its job by the time your addClass script fires. Something tells me this isn't necessarily the problem, though; the document ready function will actually be LATER than scripts running before the page is fully built.
There's also a syntax issue: 'fancybox fancybox.iframe' is not valid. You can add space separated classes if you want to add multiple, but "fancybox.iframe" is not a valid class. I believe JavaScript will let you add it, but you can't style it and there might be problems selecting it.
Don't you simply need $('iframe').addClass('fancybox')?
I'd make sure that your addClass is succeeding first, and if it is, are the classes required all present and accounted for. Then, debug timing issues.

Answer 3

The code you have shown works fine. That is, when I open a file with this it works:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<iframe>sfdfsf</iframe>
<script>
$('iframe').addClass('fancybox fancybox.iframe');
</script>
What does your fancybox code look like?
You can turn youtube links into embedded videos with something like this:
$(document).ready(function() {
$("a.youtube").click(function() {
$.fancybox({
'padding' : 0,
'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', // <--add a comma here
'swf' : {'allowfullscreen':'true','wmode':'opaque'}
});
return false;
});
Same thing can be done with Vimeo urls.