Question

我的页面上有一堆图像链接到使用Featerlight.js在模态窗口中打开的视频。

我正在使用循环来模拟我在Wordpress中的内容，但似乎所有的jacklight模式都被推到了文档的末尾（在页脚之后）。

即使我的代码是这样写的：

<?php foreach ( $rss_items as $item ) : ?>

    <?php // Start Loop // ?>
    <div class="col-xs-4">

        <?php // Start Modal Link // ?>
        <a class="thumb-link" data-featherlight="#video-modal">
            <img src="<?php echo $thumb; ?>" width="100%" height="auto" />
        </a>
        <?php // End Modal Link // ?>

        <?php // Start Modal Window // ?>
        <div id="video-modal" class="lightbox">
            <video controls style="width: 100%; height: auto;">
                <source src="<?php echo $video_link; ?>" type="video/mp4">
            </video>
        </div>
        <?php // End Modal Window // ?>

    </div>
    <?php // End Loop // ?>

<?php endforeach; ?>

渲染时看起来像这样：

<?php foreach ( $rss_items as $item ) : ?>

    <?php // Start Loop // ?>
    <div class="col-xs-4">

        <?php // Start Modal Link // ?>
        <a class="thumb-link" data-featherlight="#video-modal">
            <img src="<?php echo $thumb; ?>" width="100%" height="auto" />
        </a>
        <?php // End Modal Link // ?>

    </div>
    <?php // End Loop // ?>

<?php endforeach; ?>

...

<?php // Start Modal Window // ?>
    <div id="video-modal" class="lightbox">
        <video controls style="width: 100%; height: auto;">
            <source src="<?php echo $video_link; ?>" type="video/mp4">
        </video>
    </div>
<?php // End Modal Window // ?>

显然这并不理想，因为它只是在循环中拉动第一个视频，并且每个图像都链接到同一个视频，因为视频不包含在循环中。有没有其他人遇到过这个问题，或者有没有人就如何解决这个问题提出任何建议？

Featherlight.js和WP循环

0 个答案: