• Címkék:
  • YouTube
  • video
  • bélyegkép
  • kép
  • thumbnail

jYouTube és Fancybox

Példa

Deklaráció

        $(document).ready(function(){

          // Első videó
          var video1 = 'http://www.youtube.com/watch?v=qRCagQWsklg';
          var url1 = $.jYoutube(video1, 'small');
          $('#pelda').append($('<a class="video iframe" href="' + video1 + '"><img src="' + url1 + '" alt="" /></a>'));

          // Második videó
          var video2 = 'http://www.youtube.com/watch?v=87xPQIQH7Ds';
          var url2 = $.jYoutube(video2, 'small');
          $('#pelda').append($('<a class="video iframe" href="' + video2 + '"><img src="' + url2 + '" alt="" /></a>'));

          // Harmadik videó
          var video3 = 'http://www.youtube.com/watch?v=UFKvk63Obec';
          var url3 = $.jYoutube(video3, 'small');
          $('#pelda').append($('<a class="video iframe" href="' + video3 + '"><img src="' + url3 + '" alt="" /></a>'));

          // Fancybox
          $('a.video').click(function(){
            $.fancybox({
              'padding': 0,
              'overlayOpacity': .6,
              'transitionIn': 'elastic',
              'transitionOut': 'elastic',
              'hideOnOverlayClick': false,
              'href': this.href.replace(new RegExp('watch\\?v=', 'i'), 'v/'),
              'type': 'swf',
              'swf': {
                'wmode': 'transparent',
                'allowfullscreen': true,
              },
              'onComplete': function(){
                $.fancybox.hideActivity();
              }
            })
            $.fancybox.showActivity();
            return false
          })
        });
      

HTML kód

        <div id="pelda"></div>
      

« bezár