Question

我正在制作一个WordPress主题，我正在尝试重新创建this simple image gallery popup。我已经将所有内容从该codepen翻译成了WordPress。

我遇到的问题是通过高级自定义字段插件（转发器字段）使图库可编辑后，我已经陷入弹出部分。灯箱事件触发，但我的图像没有显示。它在硬编码时非常有效，就像在codepen示例中一样。

这是相关图库模板的代码。我还将函数文件中的add_image_size设置为两种不同的大小，一种用于在页面上显示的缩略图大小，另一种用于在灯箱中显示（800x800）。

This是我工作的测试网站网址，如果有帮助的话。

<!-- start gallery lightbox area -->
<?php if(get_field('gallery')) { ?>
<section class="church-gallery">

<ul class="gallery">

    <?php while(has_sub_field('gallery')) { ?>      
        <?php $img = get_sub_field('image'); ?>

            <li>
                <?php if(get_sub_field('image')) { ?>
                <a href="#" class="btn">

                    <img src="<?php echo $img['sizes']['large-gallery']; ?>" alt="<?php if($img['alt']) {
                    echo $img['alt'];
                    } else {
                    echo $img['title']; } ?>" />

                </a>
            </li>

        <?php } ?>

    <?php } ?>

</ul>

<div class="lightbox">

    <div class="lightbox--close">X</div>

    <div class="lightbox--centre">
        <img class="lightbox__content__image" src="<?php echo $img['sizes']['large-gallery']; ?>" alt="<?php if($img['alt']) {
                    echo $img['alt'];
                    } else {
                    echo $img['title']; } ?>" />
    </div>

</div>

`

Answer 1

在测试页上，您有一个名为“script.min.js”的外部Javascript文件。

在该脚本中是将“lightbox__content__image”src设置为点击链接的href的功能（并阻止正常导航）。

在您的示例代码中，缩略图图片周围的链接全部为<a href="#" class="btn">，因此点击链接时“lightbox__content__image”也会获得src="#"。

更改此行：

<a href="#" class="btn">

要：

<a href="<?php echo $img['sizes']['large-gallery']; ?>" class="btn">

灯箱功能应该有效，因为它现在有一个要显示的图像！

存在一个次要问题，即您的“缩略图”图像与全尺寸图像的尺寸相同，为800 x 800像素。它们仅限于你的css约300px。

你提到使用两种不同的图像尺寸，但这不起作用，你没有提供足够的信息来解决原因。

无论如何，我希望这有助于你的主要问题！

无法获得全尺寸动态WordPress灯箱图像来显示

1 个答案: