Question

我正在使用高级自定义字段和Gallery Field插件以及Fancybox。如果观看者点击缩略图，则应弹出Fancybox幻灯片。问题是，缩略图没有显示出来。当我检查元素时，由于某种原因，img大小为0x0。

这是我的代码：

 <div id="post-img">    
        <?php 
        $images = get_field('gallery'); 
        $image_1 = $images[0]; 
        ?>    
         <?php foreach( $images as $image ): ?>

        <a href="<?php echo $image['url']; ?>" rel="fancybox">  
            <h5>view images</h5><img src="<?php echo $image_1['url']; ?>"/>
        </a>
        <?php endforeach; ?>
    </div><!-- #post-img -->

CSS：

#post-img {
float:left;
margin-bottom:0;
padding-top:10px;
padding-bottom:0;
}

#post-img a {
display:none;
}

#post-img img {
display:none;
width:200px;
height:auto;
}

#post-img a:first-of-type img{
display:block;
}

Answer 1

首先：您正在使用PHP和ACF，并且缩略图应填充。

但是你把它藏在了：

#post-img a {
    display:none;
}

这只是告诉每个一个＃post-img内部，它不应该显示。由于你的img在一个内部，因此没有显示。

JSFiddle where I changed display:none; to display:block; for illustrative purposes.

如果这有助于您，请告诉我。

Answer 2

首先你应该检查是否正在填充img.src？

如果是，那么为什么不尝试将height和width属性添加到img元素中？

<img src="<?php echo $image_1['url']; ?>" width="200" height="200" />

高级自定义字段图库字段图像未显示

2 个答案: