Отображать динамический контент в модальном формате fancybox с помощью AJAX

Question

Я создаю каталог актеров, который извлекает их данные из внешнего каталога и заполняет модальное всплывающее окно, связанное с их изображением.

В настоящее время я перечислил все изображения актеров, и когда вы нажимаете на них, появляется модальное всплывающее окно (fancybox).

Tp вытащить информацию о акторе из их внешнего каталога, я использую PHP Simple HTML DOM Parser - это позволяет мне настраивать элементы на их внешней странице и эхо их на моей странице.

Что я не могу понять, как это сделать, так это динамическое изменение модальности в зависимости от кликаемого актера. Прямо сейчас, когда вы нажимаете на любого актера, он заполняется только первой страницей участников. Мне нужен способ сделать эту динамику и нужно избегать тяжелых нагрузок, поэтому идеально использовать AJAX.

Вот код, который обрабатывает контент для модального:

function actor_content() { 

    echo '<div class="hidden" style="display:none">'; 
    echo '<div id="nial_actor_content">'; 
     // Create DOM from URL or file 
     $html = file_get_html('http://www.spotlight.com/5094-1276-6177'); 

     // Find all images 
     foreach($html->find('img') as $element) 
       echo '<img src="http://www.spotlight.com' . $element->src . '" /><br>'; 

     // Credits 
     echo $html->find('div.credits', 0); 

     // Skills 
     echo $html->find('div.skills', 0); 

     // Training 
     echo $html->find('div.training', 0); 

    echo '</div>'; // #nial_actor_content 
    echo '</div>'; // hidden container 


} 

Я использую WordPress, поэтому, когда внутри цикла я могу получить уникальный URL-адрес для каждого актера с помощью:

$spotlight_url = get_post_meta($post->ID, '_spotlight_url', true); 
echo $spotlight_url; 

Для FancyBox Я только с помощью встроенного содержимого:

echo '<a href="#nial_actor_content" class="actor_lightbox nial_actor">'; 
... 
echo '</a>'; 

и JQuery для этого:

jQuery(document).ready(function($) { 
$(".nial_actor").fancybox({ 
    maxWidth : 800, 
    maxHeight : 600, 
    fitToView : false, 
    width  : '70%', 
    height  : '70%', 
    autoSize : false, 
    closeClick : false, 
    openEffect : 'none', 
    closeEffect : 'none' 
}); 
}); 

То, что я пытаюсь сделать теперь динамически заполнять каждый модальное всплывающее окно, но с использованием AJAX, так что я не загружая 100s профилей на странице загрузки.

UPDATE: Ive немного изменил мой подход, внешний URL имеет уникальный идентификатор в нем для каждого профиля. Таким образом, я лишен этот идентификатор, как это:

$spotlight_url = get_post_meta($post->ID, '_spotlight_url', true); 
$spotlight_url_formatted = str_replace("http://www.spotlight.com/", "", $spotlight_url); 

, а затем добавил, что ID в качестве атрибута HREF звена профиля (для вызова FancyBox модальности). Так что теперь, мой выводимый HTML для моих перечисленных профилей выглядит следующим образом:

<a href="#5094-1276-6177" class="actor_lightbox nial_actor"> 
    <img width="200" height="200" src="http://79.170.44.105/samskirrow.com/nial/wp-content/uploads/sites/5/2016/06/yuri_buzzi.jpg" class="actor_image wp-post-image" alt="yuri_buzzi"> 
    <h3 class="actor_name">Yuri Buzzi</h3> 
</a> 

... 

Тогда для моего встроенного контента, я использую тот же уникальный идентификатор для контейнера, а затем содержимое от внешнего сайта:

echo '<div class="hidden" style="display:none;">'; 
echo '<div id="'.$spotlight_url_formatted.'">'; 

     // Create DOM from URL or file 
     $html = file_get_html($spotlight_url); 
     // Credits 
     echo $html->find('div.credits', 0); 

echo '</div>'; // #nial_actor_content 
echo '</div>'; // hidden container 

Это работает (при этом, когда я нажимаю на актера, их уникальный профиль показан в модальном виде). Однако то, что делает моя страница, сначала загружает ВСЕ профили, а затем отображает их, что, очевидно, займет много времени, чтобы загрузить, когда у меня есть более 100 действующих участников.

Есть ли способ изменить то, что я сделал, но загрузить всю информацию через AJAX?

Answer 1

Поскольку вы получить доступ к URL-адресов с

$spotlight_url = get_post_meta($post->ID, '_spotlight_url', true); 

Вы можете поместить каждый из этих URL-адресов в качестве атрибута.nial_actor элемент как

echo '<div id="nial_actor_content" myattr="$spotlight_url">'; 

и использовать URL, как

$(".nial_actor").fancybox({ 
    maxWidth : 800, 
    maxHeight : 600, 
    fitToView : false, 
    width  : '70%', 
    height  : '70%', 
    autoSize : false, 
    closeClick : false, 
    openEffect : 'none', 
    closeEffect : 'none', 
    href: $(this).attr("myattr"), 
    type: 'ajax' 
}); 

Надеется, что это помогает.