Question

我有这段代码可以检索活动页面的所有图像：

$attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' =>'image') );
foreach ( $attachments as $attachment_id => $attachment ) {
        echo wp_get_attachment_image( $attachment_id, 'thumbnail' );

我需要一些帮助来在带有帖子/页面标题和导航的灯箱中打开图像，例如https://simplelightbox.com/。

我只是在学习代码，所以我迫切需要一些帮助。

我尝试使用精美的灯箱插件，但由于灯箱未启动而无法正常工作。目前，我正在使用javascript隐藏和显示图像。

Answer 1

根据您的代码，我创建了以下短代码：

function so_all_images_lightbox() {
    $output = '';
    $attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' =>'image') );
    foreach ( $attachments as $attachment_id => $attachment ) {
        $output .= '<a class="lightboximage" href="'.wp_get_attachment_url($attachment_id).'">';
        $output .= wp_get_attachment_image($attachment_id, 'thumbnail');
        $output .= '</a>';
    }
    return $output;
}
add_shortcode('all_images_lightbox','so_all_images_lightbox');

将[all_images_lightbox]添加到要打开图库的站点。它将显示带有链接的图像的图像文件。

然后，您还将在文档中的某个位置需要一个灯箱容器（最好在页脚之前，以避免堆叠问题）：

function so_output_lightbox_container() { ?>
<div id="imagelightbox" class="image-lightbox">
  <a id="close-lightbox" title="Close Lightbox" class="close-lightbox"></a>
  <div id="imagecontainer"></div>
</div>
<?php }
add_action('get_footer', 'so_output_lightbox_container');

及其样式（您也可以将其放在定制器css或子主题css中）

function so_output_lightbox_container_css() { ?>
<style>
    .image-lightbox {
        display: none;
        z-index: -1;
        background-color: rgba(0,0,0,.90);
        width: 0;
        height: 0;
        position: fixed;
        top: 0;
        left: 0;
    }
    .image-lightbox.active {
        display: block;
        z-index: 99;
        width: 100%;
        height: 100%;
    }
    #imagecontainer {
        display: flex;
        align-items: center;
        justify-content: center; height: 100vh;
        position: relative;
    }
</style>
<?php }
add_action('wp_head', 'so_output_lightbox_container_css');

最后，您需要一些JavaScript才能将相应的图片加载到灯箱中，而不是取消链接：

function so_output_lightbox_container_js() { ?>
<script>
    ( function() {
        lightboxInit = function () {
            const lightboximage = document.getElementsByClassName('lightboximage');
            const imagelightbox = document.getElementById('imagelightbox');
            const imagecontainer = document.getElementById('imagecontainer');
            const lightboxbclose = document.getElementById('close-lightbox');

            Array.prototype.forEach.call(lightboximage, function (el) {
                    el.addEventListener('click', function () {
                        event.preventDefault();
                        let imgfile = this.getAttribute("href");
                        imagelightbox.classList.add("active");
                        imagecontainer.innerHTML = '<img alt="Click to close" src="' + imgfile + '">';
                    });
            });

            lightboxbclose.addEventListener('click', function () {
                imagelightbox.classList.remove("active");
                imagecontainer.style.height = '';
                imagecontainer.style.paddingBottom = '';
            });

            imagelightbox.addEventListener('click', function () {
                imagelightbox.classList.remove("active");
            });
        }
        lightboxInit();
    } )();
</script>
<?php }
add_action('wp_footer', 'so_output_lightbox_container_js');

通过快速将其全部扔到我的functions.php中并将短代码添加到站点进行测试：有效。点击任意位置以关闭灯箱。附加关闭按钮的样式，我留给您;-）

更新/编辑：要从模板运行该函数，只需在模板内调用该函数即可，而不是运行简码。将此添加到需要的模板中：

echo so_output_lightbox_container();

然后您可以删除该行

add_shortcode('all_images_lightbox','so_all_images_lightbox');

然后是第一个代码块，或者将其保留在原处，以备日后可能需要短代码。

更新2： 要将图标用作链接，请尝试将第一个块替换为：

function so_all_images_lightbox() {
    $output = '';
    $attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' =>'image') );
    foreach ( $attachments as $attachment_id => $attachment ) {
        $output .= '<span class="imgbx"><a class="lightboximage" href="'.wp_get_attachment_url($attachment_id).'">';
        $output .= '<i class="fas fa-camera"></i>';
        $output .= '</a>';
        $output .= wp_get_attachment_image($attachment_id, 'thumbnail').'</span>';
    }
    return $output;
}
add_shortcode('all_images_lightbox','so_all_images_lightbox');

我想检索wordpress帖子中的所有图像（均来自媒体库），并在lighbox中显示它们

1 个答案: