Wordpress 中的 Fancybox 编码 - 图像链接答案

【问题标题】：Fancybox coding in Wordpress - link for imagesWordpress 中的 Fancybox 编码 - 图像链接
【发布时间】：2017-04-15 19:31:16
【问题描述】：

我很难过。首先，这是一个安装在主题上的 Fancybox，而不是插件，其次 - 我还在学习 - 所以非常感谢您的帮助！

Fancybox 需要一个 href 链接来打开/加载 wordpress 帖子中的图片。

我正在使用“获取附加媒体”来获取帖子上的所有图片。

我可以在哪里以及如何创建 Fancybox 的 href 链接以在其中工作？

这是我正在使用的代码：

<div class="img_div">

<?php $media = get_attached_media( 'image', $post->ID );
if(! empty($media)){
foreach ( $media as $attachment ) {
    $full = wp_get_attachment_url( $attachment->ID );
    echo '<img class="image-2" data-fancybox="images" src="'.$full.'" alt="'$attachment->post_title'" />';
  }
 }
?>
</div>

这是 Fancybox 文档：

<a href="image.jpg" data-fancybox="images" data-caption="My caption">
<img src="thumbnail.jpg" alt="" />
</a>

任何帮助都会很棒...我在这部分学习曲线上感到困惑。

【问题讨论】：

所有项目都需要“fancybox”类并获得对所有图像都相同的 rel=""（因此它们在加载时会在 Fancybox 中组合在一起），那么它应该可以工作。
@Nathaniel Flic：不，v3 不使用“rel”进行分组。它使用“data-fancybox”的值。
@Ideas_Emerging：你不清楚哪一部分？只需创建指向缩略图周围完整图像的链接。就像您自己发布的 sn-p （来自文档）一样。
@janis 感谢更新。

标签： php wordpress fancybox fancybox-3

【解决方案1】：

创建指向全尺寸图像的链接，就像您在示例中看到的那样：

<a href="image.jpg" data-fancybox="images" data-caption="My caption">
    <img src="thumbnail.jpg" alt="" />
</a>

例如：

<div class="img_div">
<?php 

    $media = get_attached_media( 'image', $post->ID );

    if ( !empty($media) ) {
        foreach ( $media as $attachment ) {
            $full  = wp_get_attachment_url( $attachment->ID );
            $thumb = wp_get_attachment_url( $attachment->ID, 'thumbnail' );

            echo '<a data-fancybox="images" href="'.$full.'"><img class="image-2" src="'.$thumb .'" alt="'.$attachment->post_title.'" /></a>';
        }
    }
?>
</div>

【讨论】：