分類: 前端

這幾天重新碰一下 fancyBox
發現有幾個新應用不錯

看 source 裡面有 codepen 的 連結

剛好這次的需求，要多一個直向與橫向的呈現要不一樣

就自己 fork 了一個 版本來貼給大家看

主要是透過CSS去調整版型

@media screen and (orientation: portrait) {
   /* Top block will contain the gallery */
   .fancybox-stage {
     height: 52%;
     background: #fff;
   }
 /* Bottom block - close button and the form */
   .fancybox-form-wrap {
     position: absolute;
     left: 40px;
     right: 40px;
     bottom: 0;
     height: 48%; 
     background: #fff;
   }
 }
 @media screen and (orientation: landscape) {
   /* Left block will contain the gallery */
   .fancybox-stage {
     width: 52%;
     background: #fff;
   }
 /* Right block - close button and the form */
   .fancybox-form-wrap {
     position: absolute;
     top: 40px;
     right: 0;
     bottom: 40px;
     width: 48%; 
     background: #fff;
   }
 }

orientation: portrait 為直向的版型，上面是圖，下面是文字

orientation: landscape 為橫向版型，左邊是圖，右邊是文字，(這個demo原來就是這樣放)

PS:

附上這個 CSS屬性的 說明與版本適用表

有興趣想知道更多版型分享也歡迎留言或是到我的TG群組發問唷