无法显示全尺寸动态 WordPress 灯箱图像答案

【问题标题】：Cannot get full size dynamic WordPress lightbox image to display无法显示全尺寸动态 WordPress 灯箱图像
【发布时间】：2015-08-15 10:30:52
【问题描述】：

我正在开发一个 WordPress 主题，我正在尝试重新创建 this simple image gallery popup。我已经把所有的东西都从那个 codepen 翻译成了 WordPress。

我遇到的问题是在通过高级自定义字段插件（中继器字段）使画廊可编辑后，我卡在了弹出部分。灯箱事件触发，但我的图像没有显示。它在硬编码时可以完美运行，就像在 codepen 示例中一样。

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

This 是我正在工作的测试站点 URL，如果有帮助的话。

<!-- 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>

【问题讨论】：

标签： javascript php wordpress

【解决方案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 限制为大约 300 像素。

您提到使用两种不同的图像尺寸，但这不起作用，而且您没有提供足够的信息来找出原因。

无论如何，我希望这对您的主要问题有所帮助！

【讨论】：