Question

我要做的是以下内容。

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

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

我尝试使用媒体查询（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;}
}

当我更改主窗口大小但不想在fancybox窗口中想要它时，CSS会起作用。

以下是执行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>';
    }

单一[后期类型] .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?

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

1 个答案: