fancyBox 的 Quick product view 進階修改

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

叫做 Quick product view

看 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群組發問唷

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。