我有一个投资组合图库砌体网格（使用JIG插件）查询我的自定义post_type
对于每个帖子，单击缩略图将触发显示照片的灯箱
JIG允许您使用许多不同的灯箱版本（PrettyPhoto, JP Carousel, ColorBox , PhotoSwipe），灯箱可以配置为显示说明，标题，作者，日期和时间。时间，替代文字以及JIG内部的一些其他字段。
方法我尝试使用短代码和标准方法调用字段
[types field="my_meta_field"]或echo types_render_field( "my_meta_field", array("output" => "raw")或get_post_meta()
让<audio mp3="my_custom_field"> </audio>代码通过灯箱查询并将其显示在灯箱容器内的最直接，最简单的方法是什么？
答案 0 :(得分：0)
更改包括carusel的附加信息（它单独工作），从缩略图的链接中删除标题，以便您可以与播放器进行交互，而不是立即打开轮播（并允许其中包含HTML）。< / p>
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 : '';
});*/