0

I can find a lot of tutorials about how to load pages dynamically in WordPress and even page contents, like this:

how-to-load-just-the-content-of-a-wordpress-post-using-ajax

and

Best way to load page content in Fancybox popup?

But they don't get me quite where I want to go.

The main issue I am facing is I want to open the page within Fancybox through Ajax, but I also want that page to be accessible through it's regular URL, in the event I want to send a user directly to that page. I realize I could double every page (one using a stripped down template for Fancybox, the other for the actual site), but that feels like a maintenance nightmare down the road.

So in short; I want to use AJAX to retrieve and load only the content of a post and display using Fancybox.

Any help guys? :)

2

Here it is. Google use no JS and there is no fancy. Also links can be used with no get, just simple url: page.com/post-name/

On single page:

<?php
$apost = $_GET["type"];
preg_replace('/_/', 'html', preg_replace('/%/', 'html', htmlentities(mysql_real_escape_string($apost))));
?>
<?php if($apost == 'iframe') { ?>
<?php get_header('single'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<div class="popup people">
    staff of popup
</div>
<?php endwhile; endif; ?>
</body>
</html> 
<?php } else { ?>

<?php get_header(); ?>
<div class="single">
    <?php if (have_posts()) : while (have_posts()) : the_post();?>
    staff of content
    <?php endwhile; endif; ?>
</div>

<?php get_footer(); ?>

<?php } ?>

On html button or link, etc:

<a href="<?php the_permalink();?>#<?php the_ID(); ?>" data-fancybox-type="iframe" class="various" id="<?php the_ID(); ?>" data-class="<?php echo get_post_type( get_the_ID() ); ?>">View item</a>

In javascript:

$(".results .results_item a").each(function(){
        var hrefParts = $(this).attr('href').split('#');
        $(this).attr('href', hrefParts[0] + '?type=iframe#' + hrefParts[1]);
        });

$("a").fancybox({
    maxWidth    : 615,
    maxHeight   : 2000,
    fitToView   : true,
    width       : '100%',
    height      : '100%',
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    wrapCSS : 'people' // add a class selector to the fancybox wrap
});

$("a").click(function(event) {
        window.location.hash = this.hash;
    });

    if(window.location.hash) {
      var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
      var new_class_name = $("#" + hash).data("class");
      $("#" + hash).fancybox({
        maxWidth    : 615,
        maxHeight   : 2000,
        fitToView   : true,
        width       : '100%',
        height      : '100%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        wrapCSS : new_class_name // add a class selector to the fancybox wrap
    }).trigger('click');
      // hash found
      } else {
          // No hash found
      }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.