使用AJAX在fancybox模式中显示动态内容

Question

我正在构建一个actors目录，该目录从外部目录站点提取他们的详细信息，并填充链接到他们图片的模式弹出窗口。

目前，我已经列出了所有演员的图像，当你点击它们时，会出现模式弹出窗口(fancybox)。

Tp从他们的外部目录中提取actor信息，我使用的是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，所以我不会在页面加载时加载100个配置文件。

更新：我现在稍微改变了我的方法，外部URL为每个配置文件都有一个唯一的ID。所以我把这个ID像这样去掉了：

$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>
...

然后，对于我的内联内容，我对容器使用相同的唯一ID，然后是来自外部站点的内容：

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'
}); 

希望这能有所帮助。