無法顯示完整尺寸的動態WordPress燈箱圖片

Question

我正在研究WordPress主題，正在嘗試重新創建此簡單的圖片庫彈出窗口 。 我已經將所有內容從該Codepen翻譯成WordPress。

我遇到的問題是通過“高級自定義字段”插件（中繼器字段）使圖庫可編輯之后，我陷入了彈出部分。 燈箱事件觸發，但是我的圖像沒有顯示。 像codepen示例一樣，在進行硬編碼時，它可以完美工作。

這是我的相關庫模板的代碼。 我還將功能文件中的add_image_size設置為兩種不同的大小，一種用於縮略圖的大小顯示在頁面上，另一種（ 800x800 ）顯示在燈箱中。

這是我正在工作的測試網站網址，如果有幫助的話。

<!-- 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左右。

您提到使用兩種不同的圖像大小，但這是行不通的，並且您沒有提供足夠的信息來找出原因。

無論如何，我希望這可以解決您的主要問題！