Cześć.
Mam problem odnośnie wyświetlania się pluginu Vimeography.
Korzystam z dodatku ACF i tworzę pole do którego wkleja się shortcode, następnie AJAXem pobieram to pole i wyświetlam na stronie - w tym przypadku po uruchomieniu okna popup (tzw. modal).
Problem jest taki, że shortcode nie wyświetla się poprawnie w oknie, a gdy umieszczę go na stronie głównej, działa jak należy.
Podaję link do strony: http://ggg205.nazwa.pl/instalator/wordpress/#directors
Modal wyświetla się po kliknięciu pierwszego obrazka z lewej strony. Jak widać jest tam player vimeo, który nie wyświetla się tak jak powinien.
Po analizie doszedłem do wnioski, że w modalu brakuje części kodu HTML tego pluginu, tak jakby go ucinał, lecz nie wiem czemu.
Wkleję wam też mój kod funkcji która wysyła dane przez AJAX:
function prefix_ajax_nonpriv_load_image_data() {
if(isset($_POST['id'])) {
$id=$_POST['id'];
//$response=wp_get_attachment($id);
$valueField=get_field('Video1', $id);
$valueField=str_replace('"', '"',$valueField);
$response=[
"img"=>get_field('Portret',$id),
"title"=>get_field('Nazwa_rezysera',$id),
"descriptions"=>get_field('Opis_rezysera',$id),
"link_1"=>do_shortcode($valueField),
"link_2"=>get_field('Video2',$id),
"link_3"=>get_field('Video3',$id),
];
echo json_encode($response);
}
die();
}
Oraz kod pliku AJAX.js :
jQuery(document).ready(function($){
function build_video_code(msg) {
var result="";
if(msg['link_1'] != "" || msg['link_1'] != false)
result+=msg['link_1'];
if(msg['link_2'] != "" || msg['link_2'] != false)
result+='<div class="embed-responsive embed-responsive-16by9">'+
'<iframe class="embed-responsive-item" src="//player.vimeo.com/video/'+msg['link_2']+'"></iframe>'+
'</div>';
if(msg['link_3'] != "" || msg['link_3'] != false)
result+='<div class="embed-responsive embed-responsive-16by9">'+
'<iframe class="embed-responsive-item" src="//player.vimeo.com/video/'+msg['link_3']+'"></iframe>'+
'</div>';
return result;
}
function paste_data(msg) {
var html = '<h1 style="margin-bottom:30px;">'+msg['title']+'</h1>'+
'<div class="col-lg-4 col-md-4">'+
'<img class="img-responsive img-center" src="'+msg["img"]['url']+'" alt="portret">'+
'</div>'+
'<div class="col-lg-8 col-md-8">'+
'<div class="row">'+
'<div class="col-lg-12">'+
'<p style="margin-bottom: 32px;">'+msg['descriptions']+'</p>'+
'</div>'+
'</div>'+
'<div class="row">'+
'<div class="col-lg-12">'+
build_video_code(msg)+
'</div>'+
'</div>'+
'</div>';
$('.remodal #loadDataModal').eq(0).html(html);
}
$("a img").on('click',function(){
$('.loader').fakeLoader({
spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7'
bgColor:"#2ecc71", //Hex, RGB or RGBA colors
});
var id=$(this).attr('data-id');
$.ajax({
url: ajax_image.ajax_url,
type: "POST",
dataType:"json",
data:{
action: 'load_image_data',
id: id,
},
success : function(msg) {
paste_data(msg);
},
error : function(error) {
console.log(error);
}
});
});
});
Wytłumaczy mi ktoś, dlaczego tak się dzieje?
Dlaczego to w modalu nie wyświetla się prawidłowo, a gdy umieszczę kod ręcznie na stronie głównej, jest wszystko okej?
Pozdrawiam i czekam na odpowiedz!