добавить класс в php сгенерированный элемент с помощью jquery - PullRequest
Новая
       25

добавить класс в php сгенерированный элемент с помощью jquery

0 голосов
/ 17 марта 2012

Мне нужна помощь. Я ввожу строку из настраиваемого поля в WordPress. Эта строка представляет собой встроенный код iframe для youtube и vimeo. Мне нужно добавить класс в этот iframe для того, чтобы fancybox сделал свое дело. 

<?php
$videoLinks=get_post_meta($post->ID, "iframe video embed code", true);
echo $videoLinks;?>
<script>
$('iframe').addClass('fancybox fancybox.iframe');
</script>

При тестировании путем вставки кода встраивания iframe в настраиваемое поле я получаю это. (класс не добавлен) 

<iframe src="http://player.vimeo.com/video/33039612?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"    webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe><p><a   href="http://vimeo.com/33039612">HG Skis: Trillinton..</a> from <a   href="http://vimeo.com/hgskis">HG Skis</a> on <a href="http://vimeo.com">Vimeo</a>.</p>  <script>
$('iframe').addClass('fancybox fancybox.iframe');
</script>

Относительно новый для jquery, fancybox работает с изображениями, помеченными вручную с помощью класса fancybox. Поможет ли добавление класса, основанного на определенном событии, решить мою проблему?

Ответы [ 3 ]

0 голосов
/ 17 марта 2012

Код, который вы показали, работает нормально.То есть, когда я открываю файл с этим, он работает: 

<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>

Как выглядит ваш код fancybox?

Вы можете превратить ссылки на YouTube во встроенные видеоролики примерно так: 

 $(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;

        });

То же самое можно сделать с URL-адресами Vimeo.

0 голосов
/ 17 марта 2012

1001 * попробовать * 

<script>
 $(document).ready(function(){
  $('iframe').addClass('fancybox fancybox.iframe');
 });
</script>

это должно сыграть свою роль ... конечно, я предполагаю, что вы используете fancybox v2.x

0 голосов
/ 17 марта 2012

Это возможно о времени. Если fancybox работает через сценарий, который автоматически запускается в DOM ready и ищет элементы «fancybox» для подключения обработчиков событий, возможно, он уже выполнил свою работу к моменту запуска сценария addClass. Что-то подсказывает мне, что это не обязательно проблема; функция готовности документа будет на самом деле позже, чем сценарии, выполняемые до полной сборки страницы.

Существует также проблема синтаксиса: 'fancybox fancybox.iframe' недопустимо. Вы можете добавить разделенные пробелом классы, если хотите добавить несколько, но «fancybox.iframe» не является допустимым классом. Я верю, что JavaScript позволит вам добавить его, но вы не можете стилизовать его, и могут возникнуть проблемы с его выбором.

Тебе просто не нужно $('iframe').addClass('fancybox')?

Я бы позаботился о том, чтобы ваш addClass выполнялся первым, и, если это так, требуются ли все классы, присутствующие и учитываемые. Затем устраните проблемы с синхронизацией.

...