iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 25
1
自我挑戰組

蛻變事實-UI設計師勇闖前端城系列 第 25

[蛻變事實/D25] 設計師勇闖前端城-(懶得用腦:完美Lightbox套件包)

我的JQ/JS又不強,為了達到效果只好花工多時間去找適合的套件來使用
能在網路上找到適合的工具再加以修改,也是一門學問來著!
(如上一篇分享過...搜尋方式要適合、關鍵字要下對、沒事要多在各社群挖寶


這幾天在做Lightbox這功能效果,心想,哎呀~這沒啥!
見怪不怪...網路套件多的事嘛~~~/images/emoticon/emoticon11.gif
結果是遇見魔鬼藏在細節裡/images/emoticon/emoticon26.gif


我要的效果如下:

  • 支援Video
  • 要符合RWD(支援手機)
  • POPUP時要全屏無捲軸
  • 滑入滑出、彈入彈出的lightbox效果

就為了這幾項...尤其是前二項!
為了這應付這魔鬼級的Lightbox我整整花了二天!二天!!!!!!!
(後面日子沒有假日了 /images/emoticon/emoticon02.gif

這二天我利用codepen搜尋效果
也在google搜尋查找分享文
然後做 測試 > 翻找 > 測試 > 修改 > 驗證 > 翻找 > 修改 > 測試....
在網路上看到但又不符合我的需求的問題
大部份是捲軸、RWD問題!

後來針對「響應式」「lightbox」「iframe」
的關鍵字,總於找到我需要的效果,再加以修改已寫好的效果
就可以組合完成了!

分享這套件:
jQuery套件:「fancyBox」
中文介紹 https://salongweb.com/fancybox3.html
英文官網 https://fancyapps.com/fancybox/3/

有興趣的人去看看!
也記得多點耐心看文件~
即使下載套件,它裡面也還是有一頁HTML,
一步一步細細說明套用方法。

這幾天實在傷了太多眼了!!!!
結束這回合的練習...下回也要來玩玩Pug了!
之前朋友推我試,但我無法適應沒有頭沒有尾的HTML...
現在是一篇HTML落落長,如果遇到測試要加個DIV都要找到眼花花
還有真心反省...JS/JQ 還是基礎功練好比較實在 /images/emoticon/emoticon02.gif

還有對Pug好奇的人可以先看看這一篇文:
如果你是常切版的前端工程師,你一定要知道pug!


上一篇
[蛻變事實/D24] 設計師勇闖前端城-(懶得用腦:Google大神來顯靈)
下一篇
[蛻變事實/D26] 設計師勇闖前端城-(處理icon的那些小事-P1)
系列文
蛻變事實-UI設計師勇闖前端城35

1 則留言

0
SunAllen
iT邦高手 1 級 ‧ 2018-11-09 09:17:39

fancyBox ,很好用哦!/images/emoticon/emoticon12.gif

真的超棒der~ /images/emoticon/emoticon42.gif

我要留言

立即登入留言