JH Image Popup - 為所有文章圖片加入彈出式 Lightbox

LhaarA624T874hafeTu7Io5SobWFd9NWbSv3J6aC7pTOvTHPDyQ8a_U9x1bSw7Cskik1rAqXSQaoATI6g_UZQvpOiENex0_xTw_G65RDqnudxsGgw7PQrhAinnr96jfyCDldN3tC8IMGphI88-cN2pXj0UJ4PI_CENWGuQSySDiEyGHYKShCMbALWKDPBmrIF6uUcGCo_R6w2zxnt2KJw2yYiF7gOlCdlxTb5Jo7MAlKE_kWrr7JO6n8yDtJbszQEwiHxK_12vqpwN9D74HXWoNZkTjroy36AVp1BEWkvXt-LzvUdGrUdts4Mwqzgxgv3JHEml-s2RSJYMnwqlFuAKiKGlrMa_m39mOFh5Xbx2Du3rCx8YzTJcNAg4g2VRNblmysHf3Zeb6MzgJH0Jz7DJOi4t66wZdz8sVhJib_XCGB1fEtnNZTNIPfHBccJe3lBvNWJFPAcCmh8P011BK1Cvx7OF9fYQaGnTB81if2McqcVvNScmd-ZT6gawLFdMcFx27xrpwCD4eOZ0ijDoLN24fM688afE37QaLMEavqi5bF_nGjfi9c94H_OvmDQKv8OIPu3g8PZzTeQes0ektTIC93LFoP1Pw=w771-h385-no?.jpg

現時有不少網站也為站內的圖片加入「彈出式幻燈箱」(Pop-up lightbox),這種 lightbox 其實為讀者帶來不少好處,例如可以用更大的比率觀看網站上的圖片,也不需要轉跳至另一個頁面,簡單快捷。如果你也想為自己的 Joomla 網站加入這種 lightbox,不妨試試筆者介紹的這個 JH Image Popup,它會自動為網站上所有文章中的圖片(支援原生 com_content 及 com_k2)加入這種 lightbox,無需再手動加入,十分方便。

擴展資訊

擴展名稱: JH Image Popup
擴展版本(文章編寫時): 0.8.0
擴展作者: Joomla-Handbuch
最近更新日期(文章編寫時): 2015 年 7 月 24 日
收費種類: 免費(Free)
擴展類型(包含): 插件(Plugins)
適用 Joomla 版本: Joomla 3
擴展下載連結: Joomla 官方擴展目錄

MoApgtihv0h3vS7lrGLj1ceiRaeh0O42t9xoKbTW1TY7mN0mnd6aHrWhcvbi-JkyQREOXBugCrK5aS0lJHx6ZtFzyujDdXMA1Cpb7ReTvAYCKnK8Qb_kHMiKa0MyPkWurBxUBGJQw2BUX1GHqpkdHyAdcDY_PLq80zILDRSNcGzPrlCplm_-WpKIwqEgcPu5ey1fl2WVhzoKYf08AJ9lqSIDLlzhfJxDjUb0ggbBagrU5RnuNJ4eK0nKI9pRcV_2-m5FnRxypPJsF2rE1cBRheqRc4wvPYJnw8xDb4L5M4sNuhDDeBFSOBA5Pgn9QeWxxMUKkq7ZhzESjr6bWmLfDN_eQgRRQR2BCBYE7rbi4Hnu5W8akzIM7p_Z4hTgYppz3PKMew9dn8uydrqvp1Hnffrp7xqQgF-gtFQ45lwzyv1nJawirz0I8JA9q2_IcQpozhy1MGcvgcVaZMi56T8i4hTZk7z8xfD8vMMWuekiqOTJlwjNSh8fYAKcSgwdyQD702XsdLTDK0sBH3Tj0xGulW25K35NFhkwbuNKbMAOMj475-yTaDorcnm4U7m0PJz6-EcqEVtilbP5h51zVC0kWug2uMM4JBU=w1050-h609-no?.jpg

安裝後需要到「擴充套件 -> 外掛」搜尋 JH Image Popup 啟用插件。除此之外,你亦可以選擇 lightbox 的樣式,例如本站現正所使用的就是「lightbox2」樣式,筆者認為效果是最好的。

Google Photos 外鏈圖片錯誤修正

雖然這個插件的確不錯,但由於作者在編寫程式碼時未有考慮 Google Photos 等包含「=」等特殊符號的圖片網址,故令此插件遇上 Google Photos 外鏈圖片時會發生錯誤,筆者在此提供自己編寫的修正方法。

打開「plugins -> content -> jhimagepopup -> jhimagepopup.php」這個文件,根據你所選擇的樣式(例如選擇 lightbox2,便到文件中 case '3' 這一段),查找以下這段程式碼:

\(createImageLink = function(\)imageTag) { 
                    preg_match('/src="([^"]*)"/i', \(imageTag[0], \)results);
                    \(srcAttribute = \)results[0];
                    \(srcUrl = explode("=", \\)srcAttribute);
                    return '<a href=' . \(srcUrl[1] . ' data-lightbox="jh-image-popup">'.\)imageTag[0].'</a>';
                };


修改為以下的程式碼:

\(createImageLink = function(\)imageTag) { 
                    preg_match('/src="([^"]*)"/i', \(imageTag[0], \)results);
                    \(srcAttribute = \)results[0];
					\(srcOriginUrl = \)srcAttribute;
					\(srcSecUrl = str_replace("src=","", \)srcOriginUrl);
					\(srcFinUrl = str_replace('"',"", \)srcSecUrl);
					\(srcUrl = htmlspecialchars(\)srcFinUrl);
					return '<a data-lightbox="jh-image-popup" href="'.\(srcUrl.'">'.\)imageTag[0].'</a>'; //Fix for Google Photos links
                };

由於插件作者使用了 explode 這個 php function,利用「=」作為分隔符,把圖片連結從「src="http://......" 」中取出,可是 Google Photos 的連結中卻存在「=」,導致插件出現錯誤。

最後修改於2017 年 9 月 7 日 21:13
果汁機大叔

「果汁機大叔」?這個網名明顯就是抄 Will it Blead 那個 Tom Dickson 大叔的暱稱了,純粹因為有趣才用,沒有其他意思 XD。本人一般會撰寫有關電腦及科技的文章,並負責本站一切編程及技術問題。