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

tablesorter 好用的表格排序 plugin【63/366】

表格要顯示多筆資料
但是往往會遇到顯示順序的問題
不是一開始就要顯示排序資料
就是要透過連結另外刷新頁面

jQuery plugin 名稱:tablesorter
網址:http://mottie.github.io/tablesorter/docs/

閱讀全文 tablesorter 好用的表格排序 plugin【63/366】

jQuery 十年了【35/366】

看到一篇分享了 jQuery plugin 的文章
想說這個網站挺好用的,竟然有1K+的plugin
實際進去以後,發現沒有很好找
就想到之前在github上面整理的repo
也是蒐集很多的javascript工具
覺得應該認真蒐集一下 javascript的資源
應該多到可以寫個1周的文章吧
閱讀全文 jQuery 十年了【35/366】