分類: jQuery & javascript

JavaScript objectOverride

“`可用於設定檔，雖然有很多方法可以將兩個或兩個以上物件合併，但龜毛如我，希望可以以第一個物件為基準，後續物件向前覆蓋，遇到相同 key 就覆蓋，這很適合用在設定檔，可以有效限制傳入設定檔僅在允許的 key 中。

可參考以下，隨便看

[……]

閱讀更多

全景圖片容器，卷軸自動滾動至圖片中央，自製 jQuery 插件

在互動式網頁設計中，有時我們會遇到需要將全景圖片展示在容器中，並希望頁面加載時自動將滾動條調整至圖片的正中央位置。這篇文章將通過一個簡單的例子，展示如何自製一個 jQuery 插件來達成這個目的。

HTML 結構

使用了一張 Unsplash 全景的風景照片作為範例

CSS 樣式

要確保圖片可以超出其容器的寬度並觸發滾動效果，我們需要適當的 CSS 樣式。

自製 jQuery 插件

封裝成一個 jQuery 插件，使其易於在不同項目中重複使用。

使用範例

使用這個插件很簡單，您只需要選擇您的容器並調用 centerPanoramaScroll() 方法。

這個插件幫助您實現了在頁面加載時自動將橫向滾動條滾動至全景圖片中央的功能，無需進行繁瑣的計算或手動調整。

我們在 CodePen 上面看效果吧

See the Pen
Panoramic image container that automatically scrolls to the center of the image, a custom jQuery plugin. by VECTOR.cool 威得數位 (@ann71727)
on CodePen.

透過這篇技術分享，您學到了如何利用 jQuery 插件將全景圖片容器的滾動條自動定位至圖片中央。這不僅提升了用戶體驗，也為您的網站增添了一點小巧思。這種方法適用於各種需要強調視覺中心的場景，無論是圖片展示、產品介紹，還是其他創意應用。

[……]

閱讀更多

Swiper with lightbox 輪播插件結合燈箱

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

為何要加入燈箱功能

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

如何合併燈箱功能

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

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

[……]

閱讀更多

javascript function arguments forward to another function

使用 JavaScript 的 Apply

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

Refrance:
https://stackoverflow.com/a/3914600/6784662
https://realdennis.medium.com/javascript-%E8%81%8A%E8%81%8Acall-apply-bind%E7%9A%84%E5%B7%AE%E7%95%B0%E8%88%87%E7%9B%B8%E4%BC%BC%E4%B9%8B%E8%99%95-2f82a4b4dd66

[……]

閱讀更多

jQuery TWzipcode Plugin With Bootstrap 4 Form

TWzipcode 是一個由台灣人開發的多層次選單，可選城市、地區及郵遞區號，非常的好用，快給台灣人鼓勵鼓勵

台灣郵遞區號插件：https://github.com/essoduke/jQuery-TWzipcode

其實很早就再使用這插件了，但之前用的是舊版本，以前使用方式如下方代碼，會自動生成城市及地區的下拉選單及一個郵遞區號的文字輸入框，這樣使用方式與Bootstrap的表單結構不太相容

今天看到 v1.7.14 版本，增加了自訂HTML結構的用法，馬上來試試看，以下是HTML的用法：

果真可以相容於 Bootstrap ，這版本實在太棒了，完全跟 Bootstrap 表單融為一體，感謝作者，以下也分享我的代碼

[……]

閱讀更多

JavaScript options object merge

這很有用喔，JavaScript 把零散程式封裝成插件時，會傳入物件相關選項 options，使封裝的程式因為選項 options 的屬性值不同而能實體化出更多可能。

建立封裝程式的選項 options 物件

為維持程式正常運行，通常都會建立一個預設值物件，在實體化的時候傳入一個選項 options 物件 ，與預設選項物件合併，後者覆蓋前者，以下為範例程式：

_default 為預設物件

options 為傳入物件

_options 為合併後物件

output:

options merge

如果兩個對象都有一個具有相同名稱的屬性，則第二個對象屬性將覆蓋第一個對象。

ES6在2015年引入了spread運算符【…】，這是將兩個簡單對象合併為一個的完美方法：

output:

參考資料：

https://stackoverflow.com/a/171256/6784662

[……]

閱讀更多

jQuery / JavaScript Loaded Event

DOM 解析完成觸發

不需完成圖片、CSS、iframe等加載，只要DOM解析完成就觸發，這邊介紹兩種寫法，完成相同任務

JavaScript

jQuery

資源載入完成觸發

圖片、CSS、iframe…等，資源載入完成後觸發， 這邊一樣介紹兩種寫法，完成相同任務

JavaScript

jQuery

HTML事件參考

https://html.spec.whatwg.org/multipage/indices.html#events-2

[……]

閱讀更多

YouTube JavaScript API not triggering onYouTubeIframeAPIReady

YouTube JavaScript API 於載入完成後會呼叫一次 onYouTubeIframeAPIReady 這個全域方法，只會呼叫一次，但如果其他程式已經先載入了 YouTube JavaScript API 並初始後另外再加載 YouTube JavaScript API 則 onYouTubeIframeAPIReady 這個方法將會被覆蓋，導致最後載入的程式將不會被呼叫

也不知道為什麼 YouTube JavaScript API 不用事件觸發的方式，而且 function 名稱也沒辦法改，使用一些主題或模板，根本不知道有沒有先載入過YouTube JavaScript API，Debug到昏倒

載入 YouTube JavaScript API

為了避免 onYouTubeIframeAPIReady 這方法已被占用，這裡不用這個方法，首先一樣載入 API：

建立建構方法

接著建立建構方法取代原 onYouTubeIframeAPIReady 中的程式

計時器重複判斷 YT 是否被初始

接著透過計時器重複判斷 YT 是否被初始，若 YT 已初始就呼叫上方建構方法，如此即可不用依賴 onYouTubeIframeAPIReady 這方法，避免被覆蓋的問題

https://stackoverflow.com/a/36048501/6784662

[……]

閱讀更多