Wordpress - 使用Featherlight.js在模式框中打开高级自定义场图像

时间:2016-11-22 12:13:28

标签: wordpress lightbox advanced-custom-fields featherlight.js

我试图尽可能简单地编写我的wordpress主题代码,但我真的不明白为什么我无法使用Featherlight.js(http://noelboss.github.io/featherlight/)将高级自定义字段中的图像显示到模态框中/ p>

这是我的在线页面http://www.skuar.com

这是我的single.php代码,它只显示图像自定义字段

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>

<?php 

$image = get_field('image');

if( !empty($image) ): ?>

    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

<?php endif; ?>

    <?php endwhile; ?>
    <?php endif; ?>

这是wp循环内容

<div id="post">
    <a href ="<?php the_permalink(); ?>">

    <div class="img" href="<?php 

$image = get_field('image');

if( !empty($image) ): ?>

    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

<?php endif; ?>" data-featherlight="image">
<?php 

$image = get_field('image');

if( !empty($image) ): ?>

    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

<?php endif; ?>
    </div>

    </a>

</div>

我只是想在灯箱中打开图片...... 这有道理吗?

谢谢!

1 个答案:

答案 0 :(得分:0)

代码中的无效双引号。试试这段代码:

    <div id="post">
        <a href ="<?php the_permalink(); ?>">
            <div class="img" href="<?php  $image = get_field('image');
                if( !empty($image) ): ?>
                <?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>
                <?php endif; ?>" data-featherlight="image">
            </div>
        </a>
    </div>