javascript
  • jquery
  • html
  • 2013-10-07 68 views 0 likes 
    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網址您使用????? –

    回答

    0

    嘗試像貴麗標籤內這

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

    這是有用的,但現在我有問題的YouTube管理不起作用... –

    0

    使用視頻標籤,這裏是鏈接y的我們的幫助:

    http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all

    相關問題