2013-10-07 3 views
0

Это HTML я хочу использовать для галереи, чтобы показать видео внутри кадра, когда всплывают:FancyBox видео всплывающее окно не показал

<ul id="gallery-v"> 
    <li> <a class='video' href='video from youtube'><img src='img/2.png' alt=''></a></li> 
    <li> <a class='video' href='video from youtube'><img src='img/1.png' alt=''></a></li> 
</ul> 

Я хочу, чтобы адаптироваться к HTML, чтобы создать ту же галерею, как для изображений:

$(window).load(function() { 
    // Gallery 
    if (jQuery("#gallery-v").length) { 
     // Fancybox 
     jQuery("#gallery-v li a").fancybox({ 
      "titleShow": false, 
       "transitionIn": "elasti", 
       "transitionOut": "elastic", 
       "closeBtn": true 
     }); 

     var totalImages = jQuery("#gallery-v > li").length, 
      imageWidth = jQuery("#gallery-v > li:first").outerWidth(true), 
      totalWidth = imageWidth * totalImages, 
      visibleImages = Math.round(jQuery("#gallery-video").width()/imageWidth), 
      visibleWidth = visibleImages * imageWidth, 
      stopPosition = (visibleWidth - totalWidth); 

     jQuery("#gallery-v").width(totalWidth); 

     jQuery("#gallery-prev-v").click(function() { 
      if (jQuery("#gallery-v").position().left < 0 && !jQuery("#gallery-v").is(":animated")) { 
       jQuery("#gallery-v").animate({ 
        left: "+=" + imageWidth + "px" 
       }); 
      } 
      return false; 
     }); 

     jQuery("#gallery-next-v").click(function() { 
      if (jQuery("#gallery-v").position().left > stopPosition && !jQuery("#gallery-v").is(":animated")) { 
       jQuery("#gallery-v").animate({ 
        left: "-=" + imageWidth + "px" 
       }); 
      } 

     }); 
     $("a.video").click(function() { 
      $.fancybox({ 

       iframe: { 
        preload: false 
       } 
       maxWidth: 800, 
       maxHeight: 600, 
       fitToView: false, 
       width: "70%", 
       height: "70%", 
       autoSize: false, 
       closeClick: false, 
       openEffect: "elastic", 
       closeEffect: "none" 

      }); 
     }); 
     return false; 
    } 
}); 
+0

который YouTube URL вы используете ????? –

ответ

0

попробовать что-то вроде этого

<a class="various iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a> 
+0

Это было полезно, но теперь у меня проблема с элементами управления youtube не работает ... –

Смежные вопросы