更改fancyBox媒體的外觀和感覺？

Question

我有一個網站與fancyBox安裝和一個畫廊與圖像和視頻。 然而，圖像的外觀與視頻有很大不同。

這裏是有問題的畫廊： http://imaginefilmscommunication.com/site/#portfolio

（唯一的視頻目前是在畫廊中的最後一個） 我想看的影片看起來像圖像（大白色邊框底部，而不是圓黑色的矩形...）

這是在JavaScript或在CSS中完成？

Answer 1

如果你想觀看的影片看起來像圖像，然後用同樣的類選擇兩個，圖片和視頻，並添加media: {}像（使用當前代碼）的helpers API選項：

$(".fancybox").fancybox({ 
    helpers: { 
     title: { 
      type: 'inside' 
     }, 
     media: {} //<== added for videos 
    }, 
    padding: 0, 
    beforeShow: function() { 
     this.title = $(this.element).attr('title'); 
     this.title = '<h4>' + this.title + '</h4><hr class="gray">' + $(this.element).find('img').attr('alt'); 
     if (this.title) { 
      // New line 
      this.title += '<br />'; 
     } 
    }, 
    afterShow: function() { 
     // Render tweet button 
     twttr.widgets.load(); 
    } 
}); 

然後在（視頻）HTML改變類選擇從fancybox-media到fancybox所以這

<a class="project-wrp fancybox-media" title="Lorem ipsum dolor sit amet" rel="group7" href="https://vimeo.com/34134308">...</a> 

成爲這個

<a class="project-wrp fancybox" title="Lorem ipsum dolor sit amet" rel="group7" href="https://vimeo.com/34134308">...</a> 

注意是

helpers: { 
    ... 
    media: {} //<== added for videos 
} 

不會對圖像產生任何影響，所以你可以放心地結合在一起的選項。

見JSFIDDLE（第二拇指打開視頻）