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

Question

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

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

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

例如，使用$ color_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 } ?>