使用FancyBox使用AJAX加载页面内容?

时间:2014-01-09 作者:user2558393

我可以找到很多关于如何在WordPress中动态加载页面甚至页面内容的教程,如下所示:

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

Best way to load page content in Fancybox popup?

但他们没有把我带到我想去的地方。

我面临的主要问题是,我想通过Ajax打开Fancybox中的页面,但我也希望该页面可以通过其常规URL访问,以防我想将用户直接发送到该页面。我意识到我可以将每个页面翻一番(一个使用Fancybox的精简模板,另一个用于实际站点),但这感觉就像一场维护噩梦。

简而言之;我想使用AJAX检索和加载帖子的内容,并使用Fancybox显示。

有人帮忙吗?:)

1 个回复
最合适的回答,由SO网友:Foxsk8 整理而成

给你。谷歌没有使用JS,也没有花哨。链接也可以不使用get,只使用简单的url:page。com/post名称/

在单页上:

<?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 } ?>
在html按钮或链接等上:

<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>
在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
      }

结束

相关推荐

通过AJAX从页面获取内容

我使用的是wordpress主题,我想通过AJAX在页面中加载内容。我在我的functions.php :function my_ajax_files() { wp_localize_script( \'function\', \'my_ajax_script\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' ) ) ); wp_enqueue_script( \'function\',