Swiper with lightbox 輪播插件結合燈箱

Swiper 是一個功能豐富且流行的 JavaScript 輪播插件,廣泛應用於網站和行動應用程式的圖片輪播、幻燈片和滑塊展示。它提供了豐富的配置選項和自定義功能,非常容易擴充,不僅如此還有完整的Example,可讓開發者快速開始輕鬆創建出優雅且互動性強的輪播效果。

為何要加入燈箱功能

在很多使用場景下,只有輪播功能可能無法完全滿足需求,特別是當用戶想要更專注地放大圖片並細看細節時,我發現 Swiper 沒有預設這樣的功能,所以在這樣的情況下,將 Lightbox(燈箱)功能加入 Swiper 是一個明智的選擇。Lightbox 是一種常見的互動式圖片展示方式,它可以讓用戶單擊圖片時在一個彈出視窗中放大圖片,以提供更好的使用者體驗。這種結合可以為用戶提供更大的圖片展示空間,更方便地觀看圖片細節,並增加了互動性和使用便利性。

如何合併燈箱功能

這部分我已經實作在CodePen上,有興趣的可以參考下列程式碼,並可以直接在codePen上看執行結果,這樣最快

See the Pen
Untitled
by VECTOR.cool 威得數位 (@ann71727)
on CodePen.

[……]

閱讀更多

Json code comments

Json 為純數據,簡單來說,Json現階段沒有標準註解,但沒有註解實在很不方便,所以可以用偷吃步的方式,一樣以 Key:Value 的方式呈現資料,取個像註解的Key用雙斜線開頭而Value 就是註解的文字,用以讓程式碼忽略這個資料

這種方式註解看起來像這樣:

註解在資料裡的樣子:

https://stackoverflow.com/a/244858

[……]

閱讀更多

三竹簡訊串接 – API 網址

三竹簡訊官方API文件,API Call 的網址如下:,

https://{三竹網域名稱}/b2c/mtk/SmSend

還以為真的是直接用他官網的網域,太天真了,弄半天結果不是,最後透過客服得知三竹簡訊目前帳號分為,個人帳號 (二站)、企業帳號 (三站),Call 的網址不同,call 的網址分別為下面兩個網址:

API 網址

企業帳號 (三站)
https://smsapi.mitake.com.tw/api/mtk/SmSend?

個人帳號 (二站)
http://smsb2c.mitake.com.tw/b2c/mtk/SmSend?

簡單測試API

[……]

閱讀更多

Windows 刪除已信任的https憑證、管理憑證

游標移到左下角按右鍵,是「右鍵」喔,選執行

輸入「certmgr.msc」按確定紐

開啟憑證管理的面板,左側是憑證類別,右邊是憑證,選取憑證後可以在上方控制列按下紅色叉叉的圖標刪除,也可以點擊滑鼠右鍵選刪除,來刪除已信任的憑證

參考資料:

[……]

閱讀更多

Clear Chrome DNS Cache

快取這種東西對一般人而言,能加快網頁開啟速度何嘗不好,對於開發人員來說可能是場噩夢,開發時常遠端環境及本地端模擬環境中切換,DNS快取常令我們不知道我正在瀏覽的是遠端環境還是本地端環境,即便我已經清除了 Windows 快取,Ping IP 也顯示正確了IP了,結果還是瀏覽到遠端的網站,後來發現 Chrome 也有 DNS 快取,本篇教大家如何用最簡單的方式清除 Chrome DNS 快取。

在Chrome網址列貼上下方網址,如下圖,就會出現 Clear host cache 按鈕,按下去就對了

https://superuser.com/a/611712

[……]

閱讀更多

常用軟體或網站改為深色模式 (持續更新)

為什麼要用黑色呢,基於下面幾點理由,我愛把所有介面改為黑色介面

  • 我爽,沒別的
  • 顧眼睛
  • 省電

顧眼睛

除了第一點以外,是我個人因素外,長時間的使用電腦的朋友都該使用暗黑模式,因為暗黑模式能減少強光對眼睛的傷害,所有我們螢幕看到的顏色都是由三原色光紅色、綠色、藍色三種色光混合而成,尤其是白色,就是紅、綠、藍三種光線累加而成,而黑色正好相反,沒有光線就是黑色。

長期光線照射眼睛會造成眼睛傷害,反之,減少光線的照射能降低長時間使用電腦對眼睛的危害。

省電

不要覺得我在唬爛,暗黑模式也能省電,筆電或手機最消耗電力的就是顯示器,光是需要電力轉換,顯示器顯示光線的原理也是同一上段使用紅、綠、藍三種光線累加混合而成,黑色則為不發光,所以暗黑模式則會減少光的輸出,也就會減少電力消耗,增加續航力。

開始越來越多軟體介面或網頁介面開始支援暗黑介面,只是每一個軟體或服務的暗黑模式名稱略有不同,有的叫深色模式、有的叫夜間模式、黑暗、深色,都一樣就是把解面變成黑嚕嚕就對了,本篇就來教大家怎麼把一些常用的軟體或網路服務改成黑嚕嚕模式

Google 網頁搜尋深色模式

Windows 10 黑暗模式

win 10 也加入暗黑模式的支援,可以讓視窗跟一些兼容Windows佈景主題的應用程式都變成暗黑模式

Chrome 黑暗模式

依照官方文件說明,Windows 10 以上版本只要跟上一段介紹的佈景主題設定為「深色」即可,必要時重新開啟 Chrome 瀏覽器

官方文件:使用深色模式或深色主題瀏覽
https://support.google.com/chrome/answer/9275525?co=GENIE.Platform%3DDesktop&hl=zh-Hant

還想更黑一點嗎?

Chrome 極致黑

https://agirls.aotter.net/post/56218

Edge 黑暗模式

Firefox 黑暗模式

最早預設就是黑色的瀏覽器,但有可能手賤設定跑掉了,可以看這邊設定回來

Facebook 黑暗模式

facebook 需要先切換至新版本才能啟用深色模式,右上角三角形典下去,選取夜間模式

Line 黑暗模式

YouTube 黑暗模式

Gmail 黑暗模式

美中不足,那撰寫按鈕是怎樣,太不合群了吧

Twitter 推特黑暗模式

XMind 2020 黑暗模式

SourceTree 黑暗模式

工具 > 選項 > Theme > Dark

Android Studio 黑暗模式

Configure > Settings
Appearance & Behavior > Appearance > Theme > High contrast

Github 黑暗模式

Setting > Appearance > Theme > Dark

[……]

閱讀更多

PHP 上傳檔案,自訂錯誤訊息,當超過php.ini post_max_size 限制時

PHP上傳檔案會受限於 php.ini post_max_size 的值,這非常合理,但在程式中檔案上傳超過 post_max_size 時會直接中斷檔案上傳動作,吐出一個Warning 

在正式環境中,通常會關閉錯誤報告,程式中試著用 $_POST and $_FILES 找上傳檔案超出 post_max_size 的線索,皆回傳空值,如此一來程式很難判斷發生了怎麼一回事,沒辦法回應使用者目前情況,影響使用者體驗

透過以下代碼,可以透過PHP判斷上傳檔案超出 post_max_size 的錯誤,以便在輸出的頁面告訴使用者發生什麼事,當然也可以修改它,做需要的錯誤處裡

[……]

閱讀更多

NTP Server Taiwan 網路時間協定伺服器

台灣國家時間與頻率標準實驗室 – NTP Server

參考:http://ww.stdtime.gov.tw/Time/ntp/resource.htm

Google – NTP Server

參考:https://developers.google.com/time/

Apple – NTP Server

微軟Microsoft – NTP Server

Facebook – NTP Server

參考:https://engineering.fb.com/production-engineering/ntp-service/

[……]

閱讀更多