无法获得全尺寸的动态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灯箱图片

回答

相关问题