Skip to content

WordPress 點擊圖片放大顯示

WordPress 點擊圖片放大顯示

關於這個功能,google了很久,很久以前用過,但現在就忘了。試了很多插件後,想起來Wordpress本身就有這樣的功能,就是點擊圖片後,開啟圖片儲存地方的連結,這樣圖片就會用它原本的大小呈現出來,而大部分簡單的lightbox插件就把這個功能呈現的更視覺化。

WordPress 內建

在無安裝任何lightbox插件的情況下,上傳圖片後 link 那選擇媒體就可以了。

只是這種基礎功能非常陽春,圖片會在原頁面放大,必須按回上一頁才能回到原文,又或者在設定裡選擇用新分頁開啟,但展現起來就不夠炫。

 

WordPress 插件

這時 lightbox 插件就派上用場,點選圖片後會跳出新視窗展示圖片放大,不只好看很多,而且直接關閉視窗,感覺就是比較專業阿!

不專業試了一些插件後,Simple Lightbox 圖片載入的時間有點長,WP FeatherlightSimple Lightbox 快蠻多的,ModuloBox LiteWP Featherlight 慢一點點,Responsive Lightbox & GalleryWP Featherlight 差不多快。其中Responsive Lightbox & Gallery提供蠻多種圖片lightbox的方式,其中也有Featherlight的顯示方式,而其他方式有些感覺上也還蠻慢的,最後就用了 Responsive Lightbox & Gallery 的插件了。

WP Image Zoom

在尋找lightbox的插件中,也找到了一個好玩的插件叫做 WP Image Zoom,這個插件會像放大鏡一樣,只放大顯示鼠標在圖片上的地方,有在亞馬遜 Amazon買過東西的人應該都見過這種效果。

而且這個插件簡單好用,安裝啟動後,文章編輯的工具列裡會出現一個放大鏡的圖案。只需要在要使用放大鏡效果的圖片CSS裡加上zoooom,又或者在文章插入圖片後,點選圖片,然後點擊工具列裡放大鏡的圖案,這時zooom會自動加在這張圖片的CSS裡。讀者在閱讀文章,當滑鼠移動到圖片,就會自動出現放大鏡效果囉!

而這個插件有別於lightbox,因為不是跳出新視窗做放大圖片的動作,所以圖片的 link那不需要選取圖片的存取路徑。

不過這個功能對螢幕比較小的手機來說比較擾人,建議去插件的 General Setting 裡,把在行動裝置上使用此功能關閉。

另外網頁如果有使用 Enable Lazy Loading for images 延遲載入圖片的功能,那這個插件會失效,所以網頁瀏覽速度與插件效果之間要做取捨。

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料