WordPress彈窗圖片代碼實(shí)現(xiàn)方法詳解

來(lái)自：素雅營(yíng)銷研究院

方知筆記

2025年06月26日 02:17

在網(wǎng)站設(shè)計(jì)中，彈窗圖片是一種常見(jiàn)的交互方式，能夠在不跳轉(zhuǎn)頁(yè)面的情況下展示大圖或詳細(xì)信息。本文將介紹幾種在WordPress中實(shí)現(xiàn)彈窗圖片效果的代碼方法。

方法一：使用Lightbox插件

最簡(jiǎn)單的方式是安裝專門的Lightbox插件，如”Simple Lightbox”或”WP Featherlight”：

在WordPress后臺(tái)進(jìn)入”插件”→”安裝插件”
搜索并安裝你選擇的Lightbox插件
激活插件后，通常無(wú)需額外配置即可使用

方法二：手動(dòng)添加Lightbox功能代碼

如果你想手動(dòng)實(shí)現(xiàn)，可以將以下代碼添加到主題的functions.php文件中：

function add_lightbox_script() {
wp_enqueue_script('lightbox', 'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js', array('jquery'), '2.11.3', true);
wp_enqueue_style('lightbox-css', 'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css');
}
add_action('wp_enqueue_scripts', 'add_lightbox_script');

然后在圖片鏈接中添加data-lightbox屬性：

<a href="大圖URL" data-lightbox="image-1" data-title="圖片標(biāo)題">
<img src="縮略圖URL" alt="圖片描述">
</a>

方法三：使用jQuery實(shí)現(xiàn)簡(jiǎn)單彈窗

如果你需要自定義彈窗效果，可以使用以下jQuery代碼：

jQuery(document).ready(function($) {
$('.popup-image').click(function(e) {
e.preventDefault();
var imageUrl = $(this).attr('href');
$('body').append('<div class="image-popup-overlay"><div class="image-popup-content"><img src="'+imageUrl+'"></div></div>');
$('.image-popup-overlay').fadeIn();
});

$(document).on('click', '.image-popup-overlay', function() {
$(this).fadeOut(function() {
$(this).remove();
});
});
});

配合CSS樣式：

.image-popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
display: none;
z-index: 9999;
}

.image-popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90%;
max-height: 90%;
}