在fancybox中隐藏div但在普通页面上显示

Question

我正在尝试做的是以下内容。

我的 wordpress 页面上有一个链接，可以打开一个花式框窗口并显示内容。没有页眉/页脚或任何内容，只是带有缩略图的内容。

但是，这是我的问题，我也希望访问者能够像往常一样访问该页面。但是现在有了页眉/导航/页脚以及您通常会在网页上看到的所有内容。

我尝试使用媒体查询（fancybox 窗口为 900x700），但没有奏效。我尝试了一些javascript：

$(window).resize(function() {

  if ($(this).width() < 1024) {

    $('.single-incl-opt-out').hide();

  } else {

    $('.single-incl-opt-out').show();

    }

});

还是不走运！

有谁知道我可以做些什么来让它工作？

更新： 一些代码示例。

我如何加载我的 fancybox 内容：

<?php echo get_the_term_list_inclusief( $post->ID, 'inclusief', '<p class="extra-text"><i class="fa fa-check"></i>&nbsp;', '<br><i class="fa fa-check"></i>&nbsp;', '</p>'); ?>

一些 CSS 不起作用：

@media only screen and (max-width:85em) and (min-width:50em) { 
    .fancybox-inner .single-incl-opt-out {display: none;}
}

当我改变我的主窗口大小时，CSS 可以工作，但不像我想要的那样在 fancybox 窗口中。

这里是执行fancybox的函数：

function get_the_term_list_inclusief( $id, $taxonomy, $before = '', $sep = '', $after = '') {
    $args_incl = array('order' => 'ASC');

    $terms = wp_get_object_terms( $id, $taxonomy, $args_incl );

    if ( is_wp_error( $terms ) )
        return $terms;


    if ( empty( $terms ) )
        return false;

    $links = array();

    usort($terms, function($a, $b) {
        return strcmp($a->name, $b->name);
    });

    foreach ( $terms as $term ) {
        $link = get_term_link( $term, $taxonomy, $args_incl );
        if ( is_wp_error( $link ) ) {
            return $link;
        }

        $links[] = '<a class="fancybox-incl fancybox.ajax" title="inclusief" href="' . esc_url( $link ) . '" rel="tag">' . $term->name . '</a>';
    }

单[post-type].php的代码：

<?php get_header(); ?>
<?php the_post(); ?>

<script>
$(window).resize(function() {

  if ($(this).width() < 1024) {

    $('.single-incl-opt-out').hide();

  } else {

    $('.single-incl-opt-out').show();

    }

});
</script>


<section id="inclusief" style="margin-top:15px;">
        <div class="col-sm-5 mobile">
            <h1 class="extra-title"><?php the_title(); ?></h1>
                <div class="tabcontent" id="tab-<?php the_ID(); ?>">
                    <p><?php the_content(); ?></p>
            </div>
        </div>
        <div class="col-sm-1"></div>
        <div class="col-sm-6 no-padding">
            <div class="incl">
                <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
            </div>
        </div>
</section>

Answer 1

您当前基于媒体查询和窗口大小隐藏内容的方法对移动设备不太友好，而且 FancyBox 似乎已经支持这一点，因为它使用的是 jQuery 的 ajax 方法。更多信息在这里：http://www.w3schools.com/jquery/jquery_ajax_load.asp

更新加载 FancyBox 的 PHP 函数，以在其中包含要加载的 div 的 id：

$links[] = '<a class="fancybox-incl fancybox.ajax" title="inclusief" href="' . esc_url( $link ) . '#inclusief" rel="tag">' . $term->name . '</a>';

可以在此处找到类似的问题/答案：Jquery FancyBox target specific DIV ID?