全景圖片容器,卷軸自動滾動至圖片中央,自製 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 插件將全景圖片容器的滾動條自動定位至圖片中央。這不僅提升了用戶體驗,也為您的網站增添了一點小巧思。這種方法適用於各種需要強調視覺中心的場景,無論是圖片展示、產品介紹,還是其他創意應用。

[……]

閱讀更多

三竹簡訊串接 – 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

[……]

閱讀更多

WordPress Fix betheme Call to undefined function mfn_builder_print()

betheme 更新後,WordPress 掛掉了,開啟 WordPress 除錯模式後,出現下方錯誤 :

Fatal error: Uncaught Error: Call to undefined function mfn_builder_print()

不知道哪個版本拿掉 mfn_builder_print() 這個方法,改用 Object 來顯示編輯器內容,但透過 child theme 覆蓋主題的自訂頁面當然不會被更新,但如果要一頁一頁改又很麻煩,可以以再主題的 functions.php 這文件結尾加上這段修正,解決!!

[……]

閱讀更多

Bootstrap CSS – Change Bootstrap input focus blue glow

Bootstrap 有預設樣式,當選取指定欄位,觸發欄位焦點狀態(focus),會有一個半透明外框凸顯焦點欄位的預設藍色樣式,但隨著網頁主題樣式的需求,需要修改焦點樣式的部分

我原本以為焦點樣式的透明框式 border 邊框,查了一下是在邊框外,加上區區塊陰影,已上圖為例,修改 CSS focus 外框顏色的範例如下:

https://stackoverflow.com/a/54925591

[……]

閱讀更多

百度手機驗證 台灣 已成功

百度有些服務是蠻好用的,由於中國實名化的政策,最近登入百度後系統要求驗證手機號碼,不管你用帳密輸入,WeChat掃碼登入都必須要驗證,驗證是小事,但表單卻限用中國手機,台灣手機驗證會失敗,連簡訊都發不出去,填國際碼+886也不行。卡關了!!

最後找到一個辦法可以成功,剛已經成功通過驗證

百度 Baidu

https://www.baidu.com/

直接從百度驗證是無法的,下面有個小技巧,透過登入百度網盤來驗證手機

百度網盤

https://pan.baidu.com/

可以用掃碼登入,也可以按紅框處用帳號密碼登入

輸入完帳密,按登入,登入後會跳出驗證訊息框

太感人了,國際碼的選項出現了

下拉選單選+886,把手機及驗證碼填一填,發送手機簡訊驗證碼

驗證完成後,再登入百度,成功:)

這小漏洞不知道還有多久可用,要驗證的就趕快優:)[……]

閱讀更多

解決 Fatal error: Call to undefined function exif_read_data()

上傳圖片遇到下面問題:

Fatal error: Call to undefined function exif_read_data()

支援版本

官方文件 PHP4 以上就支援此 exif_read_data()

如果已符合版本需求還是會出現此錯誤,可以試試看下面的解決方法。

解決方法:

  1. 找到你的 PHP.ini 文件
  2. 找到下面這一行
    ;extension=php_exif.dll
  3. 把前方的分號移除,如果找不到這行,可以直接複製下列文字,貼於 PHP.ini 裡
    extension=php_exif.dll
  4. 重新啟動Apache

[……]

閱讀更多

PHP 正規表達式速查( 眼睛業障重,不要看 )

我的筆記 ( 眼睛業障重,不要看 )

正則表達式
範例

整數
[0-9]+
3704

有小數點的實數
[0-9]+\.[0-9]+
7.93

英文詞彙
[A-Za-z]+
Code

變數名稱
[A-Za-z_][A-Za-z0-9_]*
_counter

Email
[a-zA-Z0-9_]+@[a-zA-Z0-9\._]+
ccc@kmit.edu.tw

URL
http://[a-zA-Z0-9\./_]+
http://ccc.kmit.edu.tw/mybook/

描述

\
將下一個字元標記為一個特殊字元、或一個原義字元、或一個向後引用、或一個八進制轉義符。例如,“n”匹配字元“n”。“\n”匹 配一個分行符號。序列“\\”匹配“\”而“\(”則匹配“(”。

^
匹配輸入字串的開始位置。如果設置了RegExp物件的Multiline屬性,^也匹配“\n”或“\r”之後的位置。

$
匹配輸入字串的結束位置。如果設置了RegExp物件的Multiline屬性,$也匹配“\n”或“\r”之前的位置。

*
匹配前面的子運算式零次或多次。例如,zo*能匹配“z”以及“zoo”。*等價於{0,}。

+
匹配前面的子運算式一次或多次。例如,“zo+”能匹配“zo”以及“zoo”,但不能匹配“z”。+等價於{1,}。

?
匹配前面的子運算式零次或一次。例如,“do(es)?”可以匹配“do”或“does”中的“do”。?等價於{0,1}。

{n}
n是一個非負整數。匹配確定的n次。例如,“o{2}”不能匹配“Bob”中的“o”,但是能匹配“food”中的兩個o。

{n,}
n是一個非負整數。至少匹配n次。例如,“o{2,}”不能匹配“Bob”中的“o”,但能匹配“foooood”中的所有o。“o{1,}”等價於“o+”。“o{0,}”則等價於“o*”。

{n,m}
m和n均為非負整數,其中n<=m。最少匹配n次且最多匹配m次。例如,“o{1,3}”將匹配“fooooood”中的前三個o。“o{0,1}”等價於“o?”。請注意在逗號和兩個數之間不能有空格。

?
當該字元緊跟在任何一個其他限制符(*,+,?,{n},{n,},{n,m})後面時,匹配模式是非貪婪的。非貪婪模式盡可能少的匹配所搜索的字串,而預設的貪婪模式則盡可能多的匹配所搜索的字串。例如,對於字串“oooo”,“o+?”將匹配單個“o”,而“o+”將匹配所有“o”。

.
匹配除“\n”之外的任何單個字元。要匹配包括“\n”在內的任何字元,請使用像“[.\n]”的模式。

(pattern)
匹配pattern並獲取這一匹配。所獲取的匹配可以從產生的Matches集合得到,在VBScript中使用SubMatches集合,在JScript中則使用$0…$9屬性。要匹配圓括號字元,請使用“\(”或“\)”。

(?:pattern)
匹配pattern但不獲取匹配結果,也就是說這是一個非獲取匹配,不進行存儲供以後使用。這在使用“或”字元(|)來組合一個模式的各個部分是很有用。例如,“industr(?:y|ies)就是一個比”industry|industries’更簡略的運算式。

(?=pattern)
正向預查,在任何匹配pattern的字串開始處匹配查找字串。這是一個非獲取匹配,也就是說,該匹配不需要獲取供以後使用。例 如,“Windows(?=95|98|NT|2000)”能匹配“Windows2000”中的“Windows”,但不能匹配 “Windows3.1”中的“Windows”。預查不消耗字元,也就是說,在一個匹配發生後,在最後一次匹配之後立即開始下一次匹配的搜索,而不是從 包含預查的字元之後開始。

(?!pattern)
負向預查,在任何不匹配pattern的字串開始處匹配查找字串。這是一個非獲取匹配,也就是說,該匹配不需要獲取供以後使用。例如 “Windows(?!95|98|NT|2000)”能匹配“Windows3.1”中的“Windows”,但不能匹配“Windows2000”中 的“Windows”。預查不消耗字元,也就是說,在一個匹配發生後,在最後一次匹配之後立即開始下一次匹配的搜索,而不是從包含預查的字元之後開始

x|y
匹配x或y。例如,“z|food”能匹配“z”或“food”。“(z|f)ood”則匹配“zood”或“food”。

[xyz]
字元集合。匹配所包含的任意一個字元。例如,“[abc]”可以匹配“plain”中的“a”。

[^xyz]
負值字元集合。匹配未包含的任意字元。例如,“[^abc]”可以匹配“plain”中的“p”。

[a-z]
字元範圍。匹配指定範圍內的任意字元。例如,“[a-z]”可以匹配“a”到“z”範圍內的任意小寫字母字元。

[^a-z]
負值字元範圍。匹配任何不在指定範圍內的任意字元。例如,“[^a-z]”可以匹配任何不在“a”到“z”範圍內的任意字元。

\b

\B
匹配非單詞邊界。“er\B”能匹配“verb”中的“er”,但不能匹配“never”中的“er”。

\cx
匹配由x指明的控制字元。例如,\cM匹配一個Control-M或回車符。x的值必須為A-Z或a-z之一。否則,將c視為一個原義的“c”字元。

\d
匹配一個數位字元。等價於[0-9]。

\D
匹配一個非數位字元。等價於[^0-9]。

\f
匹配一個換頁符。等價於\x0c和\cL。

\n
匹配一個分行符號。等價於\x0a和\cJ。

\r
匹配一個回車符。等價於\x0d和\cM。

\s
匹配任何空白字元,包括空格、定位字元、換頁符等等。等價於[\f\n\r\t\v]。

\S
匹配任何非空白字元。等價於[^\f\n\r\t\v]。

\t
匹配一個定位字元。等價於\x09和\cI。

\v
匹配一個垂直定位字元。等價於\x0b和\cK。

\w
匹配包括底線的任何單詞字元。等價於“[A-Za-z0-9_]”。

\W
匹配任何非單詞字元。等價於“[^A-Za-z0-9_]”。

\xn
匹配n,其中n為十六進位轉義值。十六進位轉義值必須為確定的兩個數位長。例如,“\x41”匹配“A”。“\x041”則等價於“\x04”&“1”。規則運算式中可以使用ASCII編碼。

\num
匹配num,其中num是一個正整數。對所獲取的匹配的引用。例如,“(.)\1”匹配兩個連續的相同字元。

\n
標識一個八進制轉義值或一個向後引用。如果\n之前至少n個獲取的子運算式,則n為向後引用。否則,如果n為八進位數字(0-7),則n為一個八進制轉義值。

\nm
標識一個八進制轉義值或一個向後引用。如果\nm之前至少有nm個獲得子運算式,則nm為向後引用。如果\nm之前至少有n個獲取,則n為一個後跟文字m的向後引用。如果前面的條件都不滿足,若n和m均為八進位數字(0-7),則\nm將匹配八進制轉義值nm。

\nml
如果n為八進位數字(0-3),且m和l均為八進位數字(0-7),則匹配八進制轉義值nml。

\un
匹配n,其中n是一個用四個十六進位數位表示的Unicode字元。例如,\u00A9匹配版權符號(©)。

http://ccckmit.wikidot.com/regularexpression
(?!abc) 不包含abc字串
<?php
preg_match('/^page_builder_(?!abc).+.php$/',_SELF_DOC_NAME)
?>

 

常用處理涵式

preg_match()

  if(!preg_match('/^page_builder_class.?.php$/',$str))
preg_match_all()
preg_replace()
preg_replace_callback()
//use 為callback所需要其他參數
// (.+) 會存為一個變數
$match[0] = ‘href=”www.yahoo.com”‘;
$match[1] = www.yahoo.com //這就是(.+) ,不只可有一個,方式依此類推
<?php
$html = preg_replace_callback('/href="(.+)"/isU',
function($match) use ($path){
 global $path;
 $url = get_str_between($match[0],'href="','"',true);
 if(!check_url($url)){
  return 'href="'.$path.$url.'"';
 }else{
  return $match[0];
 }
},$html);
?>

preg_match_all(‘~<!–.+?–>~s’, $v->outertext , $match);
foreach($match[0] as $name){
$adname = get_str_between($name,'[‘,’]’,true);
$v->outertext = str_replace($name, ‘[‘.$adname.’]’ , $v->outertext);
}

常用參數

i
不分大小寫

s
是圓點(.)匹配所有字符,包括換行符
如果沒有設定s,則不包括換行符.

U
是反轉了匹配數量的值使其不是默認的重複,而變成在後面跟上“?”才變得重複

<?php
preg_match('/^page_builder_(?!abc).+.php$/isU',_SELF_DOC_NAME)
?>

http://php.net/manual/zh/reference.pcre.pattern.modifiers.php

常用正規
preg_match_all(‘~<!–.+?–>~s’, $html , $match); //取HTML註解
 

相關網址:

字串處理及常規表示式(regular expression)
http://www.j2h.tw/bbs/bbs16/269.html

常用的PHP正規表示式
http://mro-php.blogspot.tw/2009/10/php_19.html

正規表示式 Regular Expressionhttps://atedev.wordpress.com/2007/11/23/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%A4%BA%E5%BC%8F-regular-expression/

常用的PHP正規表示式
http://j796160836.pixnet.net/blog/post/29514227-%5B%E8%BD%89%E8%B2%BC%5D%E5%B8%B8%E7%94%A8%E7%9A%84php%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%A4%BA%[……]

閱讀更多