Question

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

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

Tp从他们的外部目录中提取演员信息，我正在使用PHP Simple HTML DOM Parser - 这允许我在其外部页面上定位元素并在我的页面上回显它们。

我无法弄清楚该怎么做是根据点击的actor动态填充模态。现在，当你点击任何一个actor时，它只会填充第一个actor页面。我需要一种方法来使这种动态，并且需要避免繁重的加载时间，因此理想情况下使用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，所以当我在循环内部时，我可以使用以下内容获取每个actor的唯一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 for this：

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多个actor时，显然需要很长时间才能加载。

有没有办法修改我所做的，但是通过AJAX加载所有信息？

Answer 1

由于您使用

访问您的网址

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

您可以将每个网址作为属性放入.nial_actor元素，如

   echo '<div id="nial_actor_content" myattr="$spotlight_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'
});

希望这有帮助。

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

1 个答案: