Javascript 将自定义字段内容传递到fancybox标题/自定义区域

我的目标是使用ACF插件将自定义内容传递到fancybox标题区域

当有图像要显示时，我加载fancybox

目前，我有这个代码开始。如何将ACF字段与fancybox一起使用，以便每个图像都有自己的自定义字段内容

例如，使用$color\u desc输出customHTML内部的链接和自定义标题

谢谢

            <?php if (get_field('c_i')) { ?>
            <script src="<?php echo THEME_BASEURL?>/js/jquery.fancybox.js"></script>
            <script src="<?php echo THEME_BASEURL?>/js/jquery.fancybox.pack.js"></script>
            <link href="<?php echo THEME_BASEURL?>/js/jquery.fancybox.css" rel="stylesheet">
            <script type="text/javascript">
                $(".fancybox").fancybox({

                    openEffect: "fade",
                    nextEffect: "fade",
                    prevEffect: "fade",
                    padding: 0,
                    helpers: {
                        title: {
                            type: 'inside'
                        }
                    },
                    beforeShow: function () {
                        var customContent = "<div class='customHTML'>My custom content</div>";
                        this.title = this.title ? this.title + customContent : customContent;
                    },
                    afterShow: function () {
                        $(".fancybox-outer").after($(".fancybox-title"));
                    }
                });
            </script>
                <div class="color_img">
                    <ul>
                          <?php
                          if( have_rows('c_i') ):
                              while ( have_rows('c_i') ) : the_row(); 
                              $image = get_sub_field('c_if');
                              $color_desc = get_sub_field('c_d');
                              $image_url = $image['sizes']['colors'];
                              $image_url_larger = $image['sizes']['large'];
                          ?>
                            <li>
                                <a class="fancybox" rel="gallery01" href="<?php echo $image_url_larger; ?>"><img src="<?php echo $image_url; ?>"></a>
                                <div><?php echo $color_desc; ?></div>
                            </li>
                          <?php
                              endwhile;
                          else :
                              // no rows found
                          endif;
                          ?> 
                    </ul>

                </div>

        <?php } ?>

没有人能告诉我正确的方向？我的目标是将文件链接附加到fancybox图像上，这样我就可以下载它了。没有人能告诉我正确的方向吗？我的目标是将文件链接附加到我可以下载的fancybox图像。