摘要:FancyBox mix video and image
環境: fancybox 1.3.4 , JQuery 1.4
目前新版的 fancybox 需要搭配較高版本的 JQuery ,
因此PO了這一篇舊版 fancybox 來實作圖片跟影片輪播的版本:
但是有時候在多瀏覽器中會有下列問題:
(1)當嵌入 Youtube 影片時 , previouse 跟 next 按鈕無法覆蓋在Youtube影片上面 :
因為在網頁上flash的影片優先權是比較高的 , 因此可以在Youtube影片網址後面加上wmode=opaque參數 ,
詳細可見這篇 : Youtube影片遮擋Div Solution
(2) previouse 跟 next 按鈕圖片切割錯誤 :
fancybox裡面的圖片有分成把 close , loading , previouse , next 等圖片匯集成一張 , 也有各自獨立分開的圖片 ,
預設使用同一張圖片 , 在指定圖片的 position 時 , 多瀏覽器的環境下會有些許誤差 , 導致切到旁邊圖片 ,
若使用各自獨立的圖片則減少這種問題的發生 , 這可以在 fancybox.css 裡面設定 close , previouse , next 等圖片要使用哪張
(3) image 張數文字蓋住youtube影片的播放按鈕 :
可以修改 fancybox.css 裡面的 fancybox-title-over 樣式 , 將之變成 center