1

我正在使用带有 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;
}
4

2 回答 2

1

首先:您正确使用了 PHP 和 ACF,并且应该填充缩略图。

但是你用你的隐藏它:

#post-img a {
    display:none;
}

这只是告诉#post-img 的每个内部,它不应该被显示。由于您的 img 位于 a 内部,因此未显示。

我更改显示的 JSFiddle:无;显示:块;用于说明目的。

让我知道这是否对您有帮助。

于 2014-02-25T07:08:18.170 回答
0

首先,您应该检查 img.src 是否被填充?

如果是,那么为什么不尝试向img 元素添加height和属性呢?width

<img src="<?php echo $image_1['url']; ?>" width="200" height="200" />
于 2014-02-22T03:31:55.063 回答