Hide div in fancybox but show on normal page

Question

What I'm trying to do is the following.

I have a link on my wordpress page that opens a fancybox window and show the content. No header/footer or anything just the content with a thumbnail.

But, and here is my problem, I also would like visitors to be able to visit that page like normal. But now with the header/navigation/footer and all the stuff you would normally see on a webpage.

I tried using media queries (fancybox window is 900x700) but that didn't work. I tried some javascript:

$(window).resize(function() {

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

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

  } else {

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

    }

});

Still not luck!

Does anyone know what I can do to get this to work?

Update: Some code examples.

How I load my fancybox content:

<?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>'); ?>

Some CSS that doesn't work:

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

The CSS works when I change my main window size but not like I want it in the fancybox window.

Here is the function to execute the 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>';
    }

Code for the single-[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>

So you want to show only the small content for smalelr screens, and the entire content for normal screens? — Glubus, Apr 13 '16 at 11:02
Yes, and no. I want the small content to only show in the fancybox window and the entire content for normal screens. — Steggie, Apr 13 '16 at 11:09
So the solution would to to reference a css file that hides all the content but the fancybox for smaller screens, and vice versa for bigger screens. — Glubus, Apr 13 '16 at 13:01
How are you loading the contents in the fancybox ? you should hide the undesired divs then .. not the in the page itself, if you can show us some code i might be able to help.Good luck. — Amin.T, Apr 13 '16 at 13:53
I don't see any JS here but you could specify the content that you want to load via your AJAX call. That way, when you load it via fancy box, it only loads the content you want from the page and then when visitors hit that page, they get the standard experience with the headers and footers. Check this out, according to this answer you could just add the ID or Class of the element you want to load at the end of your href: http://stackoverflow.com/questions/2613025/jquery-fancybox-target-specific-div-id — ReLeaf, Apr 13 '16 at 15:28

score 0 · Answer 1 · edited May 23 '17 at 11:45

0

Your current approach to hiding the content based on media queries and window size is not very mobile friendly and it appears that FancyBox already supports this since it's using jQuery's ajax method. More info on that here: http://www.w3schools.com/jquery/jquery_ajax_load.asp

Update your PHP function that loads the FancyBox to include the id of the div you want to load inside of it:

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

A similar question/answer can be found here: Jquery FancyBox target specific DIV ID?

edited May 23 '17 at 11:45

Community

1
1

answered Apr 13 '16 at 15:31

ReLeaf

1,368
1
10
17

Thanks for the link. How ever. Im not that of a coder. Is there anyway you or someone else could help me out on this one? First off load the way the links ar displayed: `ID, 'inclusief', '
', '
', '
'); ?>` Then apply the function? `$(".extra-text").on('click', function(event) { $('#show_style').load(this.href + " #inclusief").fancybox(); });` Would it look something like that then? – Steggie Apr 14 '16 at 09:25

Hide div in fancybox but show on normal page

1 Answers1