無法獲得全尺寸的動態WordPress燈箱圖片

我正在研究一個WordPress主題，我試圖重新創建this simple image gallery popup。我已將所有內容從該代碼轉換爲WordPress。無法獲得全尺寸的動態WordPress燈箱圖片

我遇到的問題是通過高級自定義字段插件（中繼器字段）使畫廊可編輯後，我卡在彈出部分。燈箱事件發生，但我的圖像沒有顯示出來。它在硬編碼時非常完美，就像在codepen示例中一樣。

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

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>

來源

2015-08-15 Craig Garrity

在您的測試頁，你有一個名爲「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。

您提到使用兩種不同的圖像尺寸，但這不起作用，你還沒有給出足夠的信息來解決原因。

無論如何，我希望這有助於您的主要問題！

來源

2015-08-15 02:30:52 beercohol

無法獲得全尺寸的動態WordPress燈箱圖片

回答

相關問題