高级自定义字段 - 单击缩略图时的 Fancybox 幻灯片答案

【问题标题】：Advanced Custom Fields - Fancybox Slideshow on Clicking a Thumbnail高级自定义字段 - 单击缩略图时的 Fancybox 幻灯片
【发布时间】：2014-02-20 01:39:44
【问题描述】：

我正在尝试创建一个精美的幻灯片，当您单击一个缩略图时会弹出该幻灯片。我将高级自定义字段与图库字段一起使用。

这就是我所拥有的；

        <?php 
        $images = get_field('gallery'); 
        $image_1 = $images[0]; 
        ?>    
        <a href="<?php echo $images['url']; ?>" rel="fancybox">
       <img src="<?php echo $image_1['url']; ?>" /></a>

不幸的是，当您单击图像时没有任何反应……

有什么线索吗？

谢谢！

【问题讨论】：

标签： wordpress advanced-custom-fields

【解决方案1】：

正如 Pranita 所说，您应该使用 for 循环来生成图库。

如果此显示的缩略图比您想要的多，您可以简单地构建您的 HTML/CSS，以便隐藏除第一个之外的每个缩略图。

使用来自official documentation 的这个，并根据您的需要对其进行自定义。

<?php $images = get_field('gallery'); 

if( $images ) : ?>
    <div id="carousel" class="flexslider">
        <ul class="slides">

        <?php foreach( $images as $image ): ?>
            <li>
                <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
            </li>
        <?php endforeach; ?>

        </ul>
    </div>
<?php endif; ?>

【讨论】：

【解决方案2】：

问题是您使用了 $images['url'] 其中 images 是一个多维数组。它必须是 $image_1['url'];

如果您想要每张图片，只需使用 for 循环。否则，如果您只想要一张图片，请使用

<a href="<?php echo $images[0]['url']; ?>" rel="fancybox">
       <img src="<?php echo $images[0]['url']; ?>" /></a>

【讨论】：

我使用 $images['url'] 因为我希望所有其他图像都链接到一个图像。如果我使用 for 循环，所有图像也会显示为缩略图，但我只想要一个缩略图。