Fancybox iframe говорит, что моя ссылка на YouTube не определена - PullRequest
Новая
       26

Fancybox iframe говорит, что моя ссылка на YouTube не определена

2 голосов
/ 18 июня 2010

Вот мой HTML: 

<a class="video iframe" href="http://www.youtube.com/watch?v=Psk2Pq03rv0&#38;fs=1">Arbitrary text</a>

Вот сценарий Fancybox: 

<script type='text/javascript'>  
  $(document).ready(function(){  
    $("a.video").fancybox({  
      'href'    : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),  
      'type'    : 'swf',  
      'swf'     : {  
        'wmode' : 'transparent',  
        'allowfullscreen': 'true'  
      }  
    });  
    return false;  
  });
</script>

Консоль Firebug говорит: 

this.href is undefined  
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),

В результате, нажав эту ссылку, пользователь переходит на YouTube и не запускает Fancybox. Изменение проблемной строки на 'href' : this.href.replace(new RegExp("watch?v=", "i"), 'v/'),, что мне кажется более правильным, дает тот же результат.

Любой совет?

РЕДАКТИРОВАТЬ: я изменил свой сценарий, чтобы включать только части, относящиеся к моему вопросу.

Ответы [ 2 ]

2 голосов
/ 18 июня 2010

Тег скрипта должен выглядеть следующим образом 

<script type='text/javascript'>
$(document).ready(function(){
    $("a.video").click(function() {
        $.fancybox({
                'padding' : 0,
                'autoScale' : false,
                'title' : this.title,
                'overlayOpacity' : '.6',
                'overlayColor' : '#333',
                'transitionIn' : 'none',
                'transitionOut' : 'none',
                'centerOnScroll' : false,
                'showCloseButton' : true,
                'hideOnOverlayClick': false,
                'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
                'type' : 'swf',
                'swf' : {
                'wmode': 'transparent',
                'allowfullscreen': 'true'
                }
        });
        return false;
    });
});
</script>

URL должен выглядеть следующим образом - добавить & fs = 1 в конецэто 

<a class="video iframe" href="http://www.youtube.com/watch?v=Psk2Pq03rv0&fs=1">Arbitrary text</a>
1 голос
/ 19 июня 2010

this.href в данном контексте ссылается на документ, а не на якорь. 

$("a.video").fancybox({
    'padding' : 0,
    'autoScale' : false,
    'title' : this.title,
    'overlayOpacity' : '.6',
    'overlayColor' : '#333',
    'transitionIn' : 'none',
    'transitionOut' : 'none',
    'centerOnScroll' : false,
    'showCloseButton' : true,
    'hideOnOverlayClick': false,
    'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
    'type' : 'swf',
    'swf' : {
        'wmode': 'transparent',
        'allowfullscreen': 'true'
    }
});

В равной степени записывается как: 

var options = {
    'padding' : 0,
    'autoScale' : false,
    'title' : this.title,
    'overlayOpacity' : '.6',
    'overlayColor' : '#333',
    'transitionIn' : 'none',
    'transitionOut' : 'none',
    'centerOnScroll' : false,
    'showCloseButton' : true,
    'hideOnOverlayClick': false,
    'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
    'type' : 'swf',
    'swf' : {
        'wmode': 'transparent',
        'allowfullscreen': 'true'
    }
};
$("a.video").fancybox(options);

якорь недоступен в этомcontext.

Один из вариантов - заключить код в каждый блок 

$("a.video").each(function(function(index, value)) {
   var obj = $(value);
   obj.fancybox({
        'padding' : 0,
        'autoScale' : false,
        'title' : this.title,
        'overlayOpacity' : '.6',
        'overlayColor' : '#333',
        'transitionIn' : 'none',
        'transitionOut' : 'none',
        'centerOnScroll' : false,
        'showCloseButton' : true,
        'hideOnOverlayClick': false,
        'href' : value.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
        'type' : 'swf',
        'swf' : {
            'wmode': 'transparent',
            'allowfullscreen': 'true'
        }
    });
});
...