Question

我尝试使用featherlight.js在模式框中显示2个不同的内容。这很简单：

如果有图像＆＃39;，则显示“＆＃39;图像”，否则如果有＆＃39; soundcloud url＆＃39;则会显示＆＃39;＆＃39; soundcloud url＆＃39; iframe中。但它不起作用！

这是我的website

这是代码

<div id="post"> 
    <a href="#" data-featherlight="#featherlight">      
        <div class="img"> 
            <div class="art-overlay"> 
                <div class="small"> 
                    <img src="<?php echo get_template_directory_uri(); ?>/images/skuar_small.png" alt="skuar" /> 
                </div> 
            </div>   

    <?php 
        if ( has_post_thumbnail() ) { 
        the_post_thumbnail('post-thumbnails'); 
        } 
    ?> 

<?php 

if( get_field( 'image' ) ) { ?>
<?php the_field( 'image' ); ?>
  <?php } 
  else { ?>
<iframe width="600" height="166" scrolling="no" class="lightbox" class="frame" id="featherlight" frameborder="no" src="https://w.soundcloud.com/player/?url=<?php the_field( 'music' ); ?>&color=1b1e25&theme_color=1b1e25&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
<?php endif; ?><?php } ?>      
        </div> 
    </a> 
</div>

Answer 1

如果你现在看一下，使用featherlight.js就可以了：skuar.com

因为我删除了缩略图上的叠加层！有没有办法添加这个非常简单的叠加层？

    <div class="art-overlay">
        <div class="small">
            <img src="<?php echo get_template_directory_uri(); ?>/images/skuar_small.png" alt="skuar" />
        </div>

.art-overlay {

    display: flex;
    background: rgba(0,0,0,0.2);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 300ms;
    transition: opacity 300ms;

    .small {
        margin: auto;
        width: 59px;
        height: 75px;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
    }
}

#post:hover .art-overlay {
    opacity: 1;
    cursor: pointer;
}

模态框内容取决于自定义字段

1 个答案: