如何让WordPress中Photo Gallery by 10Web插件的灯箱图片描述默认显示？

我完全懂你遇到的困扰——用Photo Gallery by 10Web插件做的图片库，点开图片弹出灯箱后，图片描述默认藏着，得点那个「显示信息」按钮才出来，想让它一开始就展示对吧？你已经试了CSS和JS方案但没生效，咱们来调整下解决方案：

先试试更精准的CSS方案 #

插件的灯箱会在显示时添加特定的类（比如.bwg_lightbox_visible），我们可以利用这个类提高样式优先级，确保覆盖插件的默认隐藏逻辑：

/* 强制显示灯箱信息容器 */
.bwg_lightbox.bwg_lightbox_visible .bwg_image_info_container1 {
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important; /* 防止容器被设为0高度 */
}

/* 让信息按钮同步为"收起信息"的状态 */
.bwg_lightbox.bwg_lightbox_visible .bwg_info {
    /* 部分插件会通过旋转图标区分状态，可根据实际情况调整 */
    transform: rotate(180deg) !important;
}

/* 确保滚动容器正常显示 */
.bwg_lightbox.bwg_lightbox_visible #mCSB_1,
.bwg_lightbox.bwg_lightbox_visible #mCSB_1_container {
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
}

你可以把这段代码加到主题的「自定义CSS」面板，或者通过自定义CSS插件添加。

如果CSS还是不行，试试改进后的JS方案 #

因为插件的灯箱是动态生成的，之前的脚本可能没精准抓住灯箱加载的时机，我们调整下逻辑，确保灯箱完全渲染后再执行操作：

function force_lightbox_info_display() {
    ?>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 核心函数：强制显示灯箱信息
            function showLightboxInfo() {
                // 只处理正在显示的灯箱
                const lightbox = document.querySelector('.bwg_lightbox.bwg_lightbox_visible');
                if (!lightbox) return;

                // 显示信息容器
                const infoContainer = lightbox.querySelector('.bwg_image_info_container1');
                if (infoContainer) {
                    infoContainer.style.display = 'table-cell';
                    infoContainer.style.visibility = 'visible';
                    infoContainer.style.opacity = '1';
                    infoContainer.style.height = 'auto';
                }

                // 模拟点击信息按钮，触发插件内部状态切换（按钮会变成"收起"状态）
                const infoButton = lightbox.querySelector('.bwg_info');
                if (infoButton) {
                    infoButton.click();
                    // 如果click无效，可尝试添加插件的激活类，比如：
                    // infoButton.classList.add('active');
                }

                // 修复滚动容器的显示问题
                const scrollContainer = lightbox.querySelector('#mCSB_1');
                const scrollContent = lightbox.querySelector('#mCSB_1_container');
                if (scrollContainer && scrollContent) {
                    scrollContainer.classList.remove('mCS_y_hidden', 'mCS_no_scrollbar_y');
                    scrollContent.classList.remove('mCS_y_hidden', 'mCS_no_scrollbar_y');
                    scrollContainer.style.maxHeight = 'none';
                    scrollContainer.style.visibility = 'visible';
                    scrollContainer.style.opacity = '1';
                }
            }

            // 监听DOM变化，精准捕捉灯箱显示事件
            const observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    // 检查灯箱是否添加了显示类
                    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                        const target = mutation.target;
                        if (target.classList.contains('bwg_lightbox') && target.classList.contains('bwg_lightbox_visible')) {
                            setTimeout(showLightboxInfo, 150); // 延迟确保内容加载完成
                        }
                    }
                    // 检查灯箱是否被添加到页面
                    if (mutation.type === 'childList') {
                        mutation.addedNodes.forEach(function(node) {
                            if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('bwg_lightbox_visible')) {
                                setTimeout(showLightboxInfo, 150);
                            }
                        });
                    }
                });
            });

            observer.observe(document.body, {
                attributes: true,
                childList: true,
                subtree: true,
                attributeFilter: ['class']
            });

            // 额外监听图片点击，双重保险
            document.addEventListener('click', function(e) {
                if (e.target.closest('.bwg-item')) { // 图片项的类，可根据实际调整
                    setTimeout(showLightboxInfo, 300);
                }
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'force_lightbox_info_display', 999); // 高优先级确保在插件脚本后加载

把这段代码加到主题的functions.php文件，或者用代码片段插件添加。

额外排查小技巧 #

1. 打开浏览器开发者工具（F12），点击图片打开灯箱，查看信息容器和按钮的类变化，确认插件用的具体类名（比如按钮点击后是否加了active类）
2. 如果CSS不生效，检查插件是否动态添加了内联样式，这种情况下JS方案会更可靠
3. 确保你的自定义代码是在插件脚本之后加载的（比如JS用999优先级）

备注：内容来源于stack exchange，提问作者unity-student