Javascript 在公文包页面上显示元字段mp3并添加到lightbox容器 我现在的基本情况是：

我有一个公文包图库砌体网格（使用JIG插件），用于查询我的自定义帖子类型。
对于每篇文章，单击缩略图将触发一个显示照片的灯箱。
JIG允许您使用多种不同的灯箱版本（

prettypto、JP Carousel、ColorBox、photoswip

），灯箱可以配置为显示说明、标题、作者、日期和时间、alt文本以及JIG本身中的其他一些字段

预期目标：

在lightbox中，我想显示一个音频播放器，并将其src从显示的当前帖子中拉出，就像它是一个标题、alt文本或标题字段一样

我已经为它设置了前端添加新帖子表单，以接受mp3 url，该url将url保存到“my_meta_”字段中的mp3中

我使用将url注入标记的短代码。默认为当前post，但可以配置为接受$parent_post或任何其他变量

我尝试使用的方法从快捷码和标准方法调用字段。
[

types field=“my\u meta\u field”

]或

echo types\u render\u field（“my\u meta\u field”、数组（“output”=>“raw”）

或

get\u post\u meta（）

---

让

代码通过lightbox的查询并将其显示在lightbox容器内的最直接、最简单的方法是什么？

更改包括carusel的附加信息（它单独工作），从缩略图的链接中删除标题，这样您就可以与播放机进行交互，而不必立即打开旋转木马（并允许其中包含HTML）

justized-image-grid.php v2.0.4
第1304行
wp_enqueue_脚本（'justized-image-grid'，plugins_url（'js/justized-image-grid-min.js'，'jquery'，self:：PLUGIN_VERSION，true）；
成为
wp_enqueue_脚本（'justized-image-grid'，plugins_url（'js/justized-image-grid.js'，'jquery'，self:：PLUGIN_VERSION，true）；
（加载未统一的JS）
在第8117行之后插入新代码：
如果（$recents\u post\u type=='project'）{
$audio\u url=get\u post\u meta（$post->ID，'pf\u podsnack'，true）；
如果（！空（$audio_url））{
if（strpos（$audio_url，'iframe'）==false）{
$d['description']。='
';
}否则{
$d['description']。=$audio\u url；
}
}
}
在将来的版本中，行号将更改，但您会发现此区域在行前2行：
交换机（$recents\u link\u to）{
第8143行
$data['carousel\u data']=$this->jig\u add\u carousel\u data（获取帖子缩略图id（$post->id），$link\u title\u字段，$img\u alt\u字段）；
巴卡姆
$data['carousel\u data']=$this->jig\u add\u carousel\u data（获取帖子缩略图id（$post->id），$d['title']，$d['description']，true）；
第12136行插入新代码：
.图像网格音频{
显示：块；
宽度：100%；
}
.jp旋转木马标题DDESC描述音频，
.jp旋转木马标题描述iframe{
显示：块；
}
.对齐的图像网格iframe{
显示：块；
保证金：0自动；
}
音频和iFrame的CSS样式。
12251
wp_enqueue_脚本（'justized-image-grid'，plugins_url（'js/justized-image-grid-min.js'，'jquery'，self:：PLUGIN_VERSION，true）；
成为
wp_enqueue_脚本（'justized-image-grid'，plugins_url（'js/justized-image-grid.js'，'jquery'，self:：PLUGIN_VERSION，true）；
（加载未统一的JS）
第14856行
函数jig\u add\u carousel\u data（$attachment\u id、$link\u title\u field、$img\u alt\u field）{
成为
函数jig\u add\u carousel\u data（$attachment\u id，$link\u title\u field，$img\u alt\u field，$ready=false）{
第14873-14882行
//获得头衔
$d['title']=esc_attr（stripslashes（$attachment->post_title））；
$d['caption']=esc_attr（条带斜杠（$attachment->post_摘录））；
$d['description']=esc_attr（stripslashes（$attachment->post_content））；
$d['alternate']=esc_attr（条带斜杠（get_post_meta（$attachment->ID，'wp_attachment_image_alt'，true））；
$attachment\u title=$d[$img\u alt\u field]？wptexturize（$d[$img\u alt\u field]）：“”；
$attachment\u desc=$d[$link\u title\u field]？wpautop（wptexturize（$d[$link\u title\u field]）：“”；
成为
如果（$ready==false）{
//获得头衔
$d['title']=esc_attr（stripslashes（$attachment->post_title））；
$d['caption']=esc_attr（条带斜杠（$attachment->post_摘录））；
$d['description']=esc_attr（stripslashes（$attachment->post_content））；
$d['alternate']=esc_attr（条带斜杠（get_post_meta（$attachment->ID，'wp_attachment_image_alt'，true））；
$attachment\u title=$d[$img\u alt\u field]？wptexturize（$d[$img\u alt\u field]）：“”；
$attachment\u desc=$d[$link\u title\u field]？wpautop（wptexturize（$d[$link\u title\u field]）：“”；
}否则{
$attachment\u title=esc\u attr（$link\u title\u字段）；
$attachment\u desc=esc\u attr（$img\u alt\u字段）；
}
----------
js-image-grid.js
justified-image-grid.php v2.0.4

line 1304

                wp_enqueue_script('justified-image-grid', plugins_url('js/justified-image-grid-min.js', __FILE__), 'jquery', self::PLUGIN_VERSION, true);

became

                wp_enqueue_script('justified-image-grid', plugins_url('js/justified-image-grid.js', __FILE__), 'jquery', self::PLUGIN_VERSION, true);

(loading unminified JS)

after line 8117 New code is inserted:


                            if($recents_post_type == 'project'){
                                $audio_url = get_post_meta( $post->ID, 'pf_podsnack', true );
                                if(!empty($audio_url)){
                                    if (strpos($audio_url, 'iframe') === false){
                                        $d['description'] .= '<audio controls="controls" preload="auto">
                                                            <source src="'.$audio_url.'" type="audio/mpeg">
                                                            </audio>';
                                        }else{
                                            $d['description'] .= $audio_url;
                                        }

                                }

                            }

In future versions the line numbering will change but you'll find this area 2 lines before the line:

                            switch ($recents_link_to) {

Line 8143 

                                        $data['carousel_data'] = $this->jig_add_carousel_data(get_post_thumbnail_id($post->ID), $link_title_field, $img_alt_field);


bacame

                                        $data['carousel_data'] = $this->jig_add_carousel_data(get_post_thumbnail_id($post->ID), $d['title'], $d['description'], true);


Line 12136 new code inserted:

                            .justified-image-grid audio{
                                display: block;
                                width: 100%;
                            }
                            .jp-carousel-titleanddesc-desc audio,
                            .jp-carousel-titleanddesc-desc iframe{
                                display: block;
                            }
                            .justified-image-grid iframe{
                                display: block;
                                margin: 0 auto;
                            }


CSS styling of the audio and iframes.

12251

                wp_enqueue_script('justified-image-grid', plugins_url('js/justified-image-grid-min.js', __FILE__), 'jquery', self::PLUGIN_VERSION, true);


became 
                wp_enqueue_script('justified-image-grid', plugins_url('js/justified-image-grid.js', __FILE__), 'jquery', self::PLUGIN_VERSION, true);


(loading unminified JS)

line 14856

        function jig_add_carousel_data($attachment_id, $link_title_field, $img_alt_field){


became

        function jig_add_carousel_data($attachment_id, $link_title_field, $img_alt_field, $ready = false){


line 14873-14882

            // Get title
            $d['title'] =  esc_attr(stripslashes($attachment->post_title));
            $d['caption'] =  esc_attr(stripslashes($attachment->post_excerpt));
            $d['description'] =  esc_attr(stripslashes($attachment->post_content));
            $d['alternate'] =  esc_attr(stripslashes(get_post_meta($attachment->ID, '_wp_attachment_image_alt', true)));

            $attachment_title = $d[$img_alt_field] ? wptexturize($d[$img_alt_field]) : '';
            $attachment_desc = $d[$link_title_field] ? wpautop(wptexturize($d[$link_title_field])) : '';


became

            if($ready == false){
                // Get title
                $d['title'] =  esc_attr(stripslashes($attachment->post_title));
                $d['caption'] =  esc_attr(stripslashes($attachment->post_excerpt));
                $d['description'] =  esc_attr(stripslashes($attachment->post_content));
                $d['alternate'] =  esc_attr(stripslashes(get_post_meta($attachment->ID, '_wp_attachment_image_alt', true)));

                $attachment_title = $d[$img_alt_field] ? wptexturize($d[$img_alt_field]) : '';
                $attachment_desc = $d[$link_title_field] ? wpautop(wptexturize($d[$link_title_field])) : '';
            }else{
                $attachment_title = esc_attr($link_title_field);
                $attachment_desc = esc_attr($img_alt_field);
            }



----------

justified-image-grid.js


after 622 new code:

                s.element.on("click", ".jig-caption", function(event){
                    event.stopPropagation();
                });


1850-1867
                if(captionContent !== ''){
                    captionContent = '<div class="jig-caption-wrapper"><div class="jig-caption">'+captionContent+'</div></div>';

                    if(s.caption !== 'below'){
                        link.append(captionContent);
                    }else if(s.middleBorderWidth !== 0 && s.innerBorder == 'always' && s.middleBorder !== 'always'){
                        imageContainer.append($(captionContent).width(overflow.width()-2*parseFloat(s.innerBorderWidth)));
                    }else{
                        imageContainer.append($(captionContent).css({'width':overflow.css("width")}));
                    }
                }else if(s.caption == 'below'){
                    captionContent = '<div class="jig-caption-wrapper"></div>';
                    if(s.middleBorderWidth !== 0 && s.innerBorder == 'always' && s.middleBorder !== 'always'){
                        imageContainer.append($(captionContent).width(overflow.width()-2*parseFloat(s.innerBorderWidth)));
                    }else{
                        imageContainer.append($(captionContent).css({'width':overflow.css("width")}));
                    }
                }



became 

                if(captionContent !== ''){
                    captionContent = '<div class="jig-caption-wrapper"><div class="jig-caption">'+captionContent+'</div></div>';

                    if(s.caption !== 'below'){
                        overflow.append(captionContent);
                    }else if(s.middleBorderWidth !== 0 && s.innerBorder == 'always' && s.middleBorder !== 'always'){
                        overflow.append($(captionContent).html(captionContent).width(overflow.width()-2*parseFloat(s.innerBorderWidth)));
                    }else{
                        overflow.append($(captionContent).html(captionContent).css({'width':overflow.css("width")}));
                    }
                }else if(s.caption == 'below'){
                    captionContent = '<div class="jig-caption-wrapper"></div>';
                    if(s.middleBorderWidth !== 0 && s.innerBorder == 'always' && s.middleBorder !== 'always'){
                        overflow.append($(captionContent).html(captionContent).width(overflow.width()-2*parseFloat(s.innerBorderWidth)));
                    }else{
                        overflow.append($(captionContent).html(captionContent).css({'width':overflow.css("width")}));
                    }
                }


line 2246-2255

            input = htmlspecialchars_decode(input);

            if(s.caption == 'below'){
                return input; // Allowing links or anything when the caption is below the image (still need to decode)
            }
            allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
            var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
                commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
            return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {
                return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
            });


became

            return $("<div/>").html(input).text();
            /*input = htmlspecialchars_decode(input);
            if(s.caption == 'below'){
                return input; // Allowing links or anything when the caption is below the image (still need to decode)
            }
            allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
            var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
                commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
            return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {
                return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
            });*/