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 的連結中卻存在「=」,導致插件出現錯誤。

最後修改於2016 年 8 月 26 日 14:05
果汁機大叔

一個極之喜歡電腦及Android的網民,亦經常留意不同電子產品資訊。除此之外,物理和化學也是我的興趣之一。至於「果汁機大叔」這個網名明顯就是借Will it Blead那個大叔Tom Dickson的了,可是問我點解,我也不清楚,就是想不到就亂想吧。